反正有2个或更多图表与foreach循环

时间：2018-08-25 13:51:54

标签： chart.js 

<html>
      <head>
             <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
      </head>
      <body>
            <script> 
                 <!--bar stacked-->
                 var data2 = {
                 CC: [{
                 code: '123ASD',
                 labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
                 datasets: [
                    {
                     label: 'AAA',
                     backgroundColor: "rgba(255,0,0,1)",
                     data: [32,41,21,78,0,0,0]
                    },
                    {
                     label: 'BBB',
                     backgroundColor: "rgba(0,255,0,1)",
                     data: [10,80,12,70,65,44,18]
                    },
                    {
                     label: 'CCC',
                     backgroundColor: "rgba(0,0,205,1)",
                     data: [915,400,233,398,334,766,1071]
                     },
               ]}
               ,
               {
                 code: 'ASD123',
                 labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
                 datasets: [
                     {
                      label: 'AAA',
                      backgroundColor: "rgba(255,0,0,1)",
                      data: [55,22,40,2,0,0,0]
                     },
                     {
                      label: 'BBB',
                      backgroundColor: "rgba(0,255,0,1)",
                      data: [10,2,100,0,17,55,74]
                      },
                      {
                      label: 'CCC',
                      backgroundColor: "rgba(0,0,205,1)",
                      data: [232,555,800,900,723,1001,942]
                      },
                      ]
                      },
                  ]
                  };
                   data2.CC.forEach( function(i, item){

                   document.body.innerHTML += '<canvas id="'+i.code+'"></canvas>'
                   var ctx2 = document.getElementById(i.kodu).getContext('2d');
                   window.myBar = new Chart(ctx2, {
                        type: 'bar',
                        data: data2.AA[0],
                        options: {
                             title: {
                                 display: true,
                                 text: i.code
                             },
                             tooltips: {
                                 mode: 'index',
                                 intersect: false
                             },
                             responsive: true,
                             scales: {
                                 xAxes: [{
                                     stacked: true,
                                 }],
                                 yAxes: [{
                                     stacked: true
                                 }]
                             }
                       }
                 });
           });
      </script>
  </body>
  </html>

当我运行时，出现以下错误：未捕获的TypeError：无法读取null的属性' currentStyle '，并且我的第一个图表无法加载 我尝试了Uncaught TypeError: Cannot read property 'currentStyle' of null in ChartJS，但我的第一个图表又没有加载 有没有人帮忙？

2 个答案:

答案 0 :(得分：1)

您遇到了几个问题：

  1. 图表参考被集合中的最后一个图表覆盖
  2. 原始源转储中不存在对变量的一些引用

  3. 图表数据源引用需要更改

    document.addEventListener('DOMContentLoaded', function(){
  var chartData = {
    CC: [{
      code: '123ASD',
      labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
      datasets: [{
        label: 'AAA',
        backgroundColor: "rgba(255,0,0,1)",
        data: [32,41,21,78,0,0,0]
      },{
        label: 'BBB',
        backgroundColor: "rgba(0,255,0,1)",
        data: [10,80,12,70,65,44,18]
      },{
        label: 'CCC',
        backgroundColor: "rgba(0,0,205,1)",
        data: [915,400,233,398,334,766,1071]
      }]
    },{
      code: 'ASD123',
      labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
      datasets: [{
        label: 'AAA',
        backgroundColor: "rgba(255,0,0,1)",
        data: [55,22,40,2,0,0,0]
      },{
        label: 'BBB',
        backgroundColor: "rgba(0,255,0,1)",
        data: [10,2,100,0,17,55,74]
      },{
        label: 'CCC',
        backgroundColor: "rgba(0,0,205,1)",
        data: [232,555,800,900,723,1001,942]
      }]
    }]
  };

  chartData.CC.forEach(function(data, index){
    var canvas = document.createElement('canvas'),
        chartId = 'chart' + data.code;

    canvas.id = chartId;

    document.body.appendChild(canvas);

    var context = document.getElementById(chartId).getContext('2d');

    window[chartId] = new Chart(context, {
      type: 'bar',
      data: data,
      options: {
        title: {
          display: true,
          text: data.code
        },
        tooltips: {
          mode: 'index',
          intersect: false
        },
        responsive: true,
        scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true
          }]
        }
      }
    });
  });
});

由于chart.js，堆栈代码段引发了脚本错误，因此我创建了Codepen

答案 1 :(得分：0)

由于您的代码应为item而不是data2.AA[0]，因此未加载图表。另外，您的数据对象中没有名称为kodu的任何属性。在下面查看工作版本：

var data2 = {
    CC: [{
            code: '123ASD',
            labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
            datasets: [{
                    label: 'AAA',
                    backgroundColor: "rgba(255,0,0,1)",
                    data: [32, 41, 21, 78, 0, 0, 0]
                },
                {
                    label: 'BBB',
                    backgroundColor: "rgba(0,255,0,1)",
                    data: [10, 80, 12, 70, 65, 44, 18]
                },
                {
                    label: 'CCC',
                    backgroundColor: "rgba(0,0,205,1)",
                    data: [915, 400, 233, 398, 334, 766, 1071]
                },
            ]
        },
        {
            code: 'ASD123',
            labels: ["7/2/2018", "7/3/2018", "7/4/2018", "7/5/2018", "7/6/2018", "7/9/2018", "7/10/2018"],
            datasets: [{
                    label: 'AAA',
                    backgroundColor: "rgba(255,0,0,1)",
                    data: [55, 22, 40, 2, 0, 0, 0]
                },
                {
                    label: 'BBB',
                    backgroundColor: "rgba(0,255,0,1)",
                    data: [10, 2, 100, 0, 17, 55, 74]
                },
                {
                    label: 'CCC',
                    backgroundColor: "rgba(0,0,205,1)",
                    data: [232, 555, 800, 900, 723, 1001, 942]
                },
            ]
        },
    ]
};
data2.CC.forEach(function(item, arr) {
    var chartId = item.code;
    var canvas = document.createElement("Canvas");
    var ctx = canvas.getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: item,
        options: {
            title: {
                display: true,
                text: chartId
            },
            tooltips: {
                mode: 'index',
                intersect: false
            },
            responsive: true,
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        }
    });

    document.body.appendChild(canvas);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

相关问题
最新问题