请选择 进入手机版 | 继续访问电脑版
分享
查看: 2771|回复: 0

[分享] Chart.js 图表与ThingJS结合

[复制链接]

Chart.js 图表与ThingJS结合

发表于 2019-9-10 11:29:10 来自 分享 阅读模式 倒序浏览
zzv_icon2771 zzr_icon0 查看全部

Chart.js 介绍

chart.js 是为设计和开发人员准备的简单、灵活的 Java 图表工具。

Chart.js 图表与ThingJS结合

Chart.js图表和ThingJS结合方法

有ThingJS平台目前只有在线开发的方式,故需要通过html5的postMessage 消息机制来实现图标和ThingJS中的3D场景交互。

Chart.js 图表实现

chartjs主要通过配置来实现图标。

chartjs实现饼图的代码如下:

  1. var ctx = document.getElementById('myChart');
  2. var myChart = new Chart(ctx, {
  3. type: 'pie',
  4. data: {
  5. labels: ['叉车', '轿车', '警车', '皮卡'],
  6. datasets: [{
  7. label: '# of Votes',
  8. data: [11964, 18799, 51966, 35876],
  9. backgroundColor: [
  10. 'rgba(255, 99, 132, 0.9)',
  11. 'rgba(54, 162, 235, 0.9)',
  12. 'rgba(255, 206, 86, 0.9)',
  13. 'rgba(75, 192, 192, 0.9)',
  14. ],
  15. borderColor: [
  16. 'rgba(255, 99, 132, 1)',
  17. 'rgba(54, 162, 235, 1)',
  18. 'rgba(255, 206, 86, 1)',
  19. 'rgba(75, 192, 192, 1)',
  20. ],
  21. borderWidth: 1
  22. }]
  23. },
  24. options: {
  25. title: { //标题 display: true,
  26. text: '车辆销售额饼图',
  27. fontColor: "#00f",
  28. },
  29. scales: {
  30. yAxes: [{
  31. ticks: {
  32. beginAtZero: true
  33. }
  34. }]
  35. },
  36. }
  37. });
复制代码

画出图表如下图

Chart.js 图表与ThingJS结合

ThingJS 3D场景实现

然后在ThingJS平台搭建一个车辆的场景如下图:


Chart.js 图表与ThingJS结合

Chartjs图表和ThingJS通讯

  1. events: ['mousemove'],
  2. onHover: function (d, i) {
  3. if (i.length > 0) {
  4. console.log(i[0]._index);
  5. iframeDom.contentWindow.postMessage(-1, '*');
  6. iframeDom.contentWindow.postMessage(i[0]._index, '*');
  7. } else {
  8. console.log(-1);
  9. iframeDom.contentWindow.postMessage(-1, '*');
  10. }
  11. }
复制代码

ThingJS接收到消息对3d对象勾边

  1. // 接收iframe页面传送的数据
  2. window.addEventListener('message', function (e) {
  3. var data = e.data;
  4. if (data == -1) {
  5. var selector = app.query('*');
  6. selector.style.outlineColor = null;
  7. } else {
  8. var selector = app.query('#1' + data);
  9. selector.style.outlineColor = '#ff0000';
  10. }
  11. })
复制代码

最后完整代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. </head>
  6. <body style="margin: 0px">
  7. <!-- <div id="container" style="position:absolute; z-index: 2; margin: 15px"></div> -->
  8. <div id="canvas-holder" style="position:absolute; z-index: 2; margin: 15px; width: 30%;">
  9. <canvas id="myChart"></canvas>
  10. </div>
  11. <iframe id='I0' style="position:absolute; width: 100%; height: 100%;"
  12. src='https://www.thingjs.com/guide/sampleindex.html?m=oLX7p04daC2OdoZCbP6VihD_0XCo/01E401B901B0201E801BD01A6.js?n=7027'></iframe>
  13. <script src='js/Chart.min.js'></script>
  14. <script>
  15. var iframeDom = document.getElementById('I0');
  16. var ctx = document.getElementById('myChart');
  17. var myChart = new Chart(ctx, {
  18. type: 'pie',
  19. data: {
  20. labels: ['叉车', '轿车', '警车', '皮卡'],
  21. datasets: [{
  22. label: '# of Votes',
  23. data: [11964, 18799, 51966, 35876],
  24. backgroundColor: [
  25. 'rgba(255, 99, 132, 0.9)',
  26. 'rgba(54, 162, 235, 0.9)',
  27. 'rgba(255, 206, 86, 0.9)',
  28. 'rgba(75, 192, 192, 0.9)',
  29. ],
  30. borderColor: [
  31. 'rgba(255, 99, 132, 1)',
  32. 'rgba(54, 162, 235, 1)',
  33. 'rgba(255, 206, 86, 1)',
  34. 'rgba(75, 192, 192, 1)',
  35. ],
  36. borderWidth: 1
  37. }]
  38. },
  39. options: {
  40. title: { //标题
  41. display: true,
  42. text: '车辆销售额饼图',
  43. fontColor: "#00f",
  44. },
  45. scales: {
  46. yAxes: [{
  47. ticks: {
  48. beginAtZero: true
  49. }
  50. }]
  51. },
  52. events: ['mousemove'],
  53. onHover: function (d, i) {
  54. if (i.length > 0) {
  55. console.log(i[0]._index);
  56. iframeDom.contentWindow.postMessage(-1, '*');
  57. iframeDom.contentWindow.postMessage(i[0]._index, '*');
  58. } else {
  59. console.log(-1);
  60. iframeDom.contentWindow.postMessage(-1, '*');
  61. }
  62. }
  63. }
  64. });
  65. </script>
  66. </body>
  67. </html>
复制代码

完整的ThingJS代码如下:

  1. var app = new THING.App({
  2. // 场景地址
  3. "url": "https://www.thingjs.com/./client/ThingJS/11606/20190126172532891305936",
  4. //背景设置
  5. "skyBox": "BlueSky"
  6. });
  7. // 接收iframe页面传送的数据
  8. window.addEventListener('message', function (e) {
  9. var data = e.data;
  10. if (data == -1) {
  11. var selector = app.query('*');
  12. selector.style.outlineColor = null;
  13. } else {
  14. var selector = app.query('#1' + data);
  15. selector.style.outlineColor = '#ff0000';
  16. }
  17. })
复制代码

完整效果图如下:


Chart.js 图表与ThingJS结合


avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t