Chart.js 是否有添加2个或更多带有foreach循环的图表变量数据2={ 抄送：[{ 代码：“123ASD”，标签：[“2018年7月2日”、“2018年7月3日”、“2018年7月4日”、“2018年7月5日”、“2018年7月6日”、“2018年7月9日”、“2018年7月10日”]，数据集：[ { 标签：“AAA”，背景色：“rgba（255,0,0,1）”，数据：[32,41,21,78,0,0,0] }, { 标签：“BBB”，背景色：“rgba（0255,0,1）”，数据：[10,80,12,70,65,44,18] }, { 标签：“CCC”，背景颜色：“rgba（0,0205,1）”，数据：[9154002333983347661071] }, ]} , { 代码：“ASD123”，标签：[“2018年7月2日”、“2018年7月3日”、“2018年7月4日”、“2018年7月5日”、“2018年7月6日”、“2018年7月9日”、“2018年7月10日”]，数据集：[ { 标签：“AAA”，背景色：“rgba（255,0,0,1）”，数据：[55,22,40,2,0,0,0] }, { 标签：“BBB”，背景色：“rgba（0255,0,1）”，数据：[10,2100,0,17,55,74] }, { 标签：“CCC”，背景颜色：“rgba（0,0205,1）”，数据：[2325558009007231001942] }, ] }, ] }; data2.CC.forEach（函数（i，项）{ document.body.innerHTML+=“” var ctx2=document.getElementById（i.kodu.getContext（'2d'）； window.myBar=新图表（ctx2{ 类型：'bar'，数据：data2.AA[0]，选项：{ 标题：{ 显示：对，文本：i.code }, 工具提示：{ 模式：“索引”，交集：错 }, 回答：是的，比例：{ xAxes：[{ 对,， }], 雅克斯：[{ 是的 }] } } }); });_Chart.js

Chart.js 是否有添加2个或更多带有foreach循环的图表变量数据2={ 抄送：[{ 代码：“123ASD”，标签：[“2018年7月2日”、“2018年7月3日”、“2018年7月4日”、“2018年7月5日”、“2018年7月6日”、“2018年7月9日”、“2018年7月10日”]，数据集：[ { 标签：“AAA”，背景色：“rgba（255,0,0,1）”，数据：[32,41,21,78,0,0,0] }, { 标签：“BBB”，背景色：“rgba（0255,0,1）”，数据：[10,80,12,70,65,44,18] }, { 标签：“CCC”，背景颜色：“rgba（0,0205,1）”，数据：[9154002333983347661071] }, ]} , { 代码：“ASD123”，标签：[“2018年7月2日”、“2018年7月3日”、“2018年7月4日”、“2018年7月5日”、“2018年7月6日”、“2018年7月9日”、“2018年7月10日”]，数据集：[ { 标签：“AAA”，背景色：“rgba（255,0,0,1）”，数据：[55,22,40,2,0,0,0] }, { 标签：“BBB”，背景色：“rgba（0255,0,1）”，数据：[10,2100,0,17,55,74] }, { 标签：“CCC”，背景颜色：“rgba（0,0205,1）”，数据：[2325558009007231001942] }, ] }, ] }; data2.CC.forEach（函数（i，项）{ document.body.innerHTML+=“” var ctx2=document.getElementById（i.kodu.getContext（'2d'）； window.myBar=新图表（ctx2{ 类型：'bar'，数据：data2.AA[0]，选项：{ 标题：{ 显示：对，文本：i.code }, 工具提示：{ 模式：“索引”，交集：错 }, 回答：是的，比例：{ xAxes：[{ 对,， }], 雅克斯：[{ 是的 }] } } }); });

chart.js

Chart.js 是否有添加2个或更多带有foreach循环的图表变量数据2={ 抄送：[{ 代码：“123ASD”，标签：[“2018年7月2日”、“2018年7月3日”、“2018年7月4日”、“2018年7月5日”、“2018年7月6日”、“2018年7月9日”、“2018年7月10日”]，数据集：[ { 标签：“AAA”，背景色：“rgba（255,0,0,1）”，数据：[32,41,21,78,0,0,0] }, { 标签：“BBB”，背景色：“rgba（0255,0,1）”，数据：[10,80,12,70,65,44,18] }, { 标签：“CCC”，背景颜色：“rgba（0,0205,1）”，数据：[9154002333983347661071] }, ]} , { 代码：“ASD123”，标签：[“2018年7月2日”、“2018年7月3日”、“2018年7月4日”、“2018年7月5日”、“2018年7月6日”、“2018年7月9日”、“2018年7月10日”]，数据集：[ { 标签：“AAA”，背景色：“rgba（255,0,0,1）”，数据：[55,22,40,2,0,0,0] }, { 标签：“BBB”，背景色：“rgba（0255,0,1）”，数据：[10,2100,0,17,55,74] }, { 标签：“CCC”，背景颜色：“rgba（0,0205,1）”，数据：[2325558009007231001942] }, ] }, ] }; data2.CC.forEach（函数（i，项）{ document.body.innerHTML+=“” var ctx2=document.getElementById（i.kodu.getContext（'2d'）； window.myBar=新图表（ctx2{ 类型：'bar'，数据：data2.AA[0]，选项：{ 标题：{ 显示：对，文本：i.code }, 工具提示：{ 模式：“索引”，交集：错 }, 回答：是的，比例：{ xAxes：[{ 对,， }], 雅克斯：[{ 是的 }] } } }); });,chart.js,Chart.js,运行时出现以下错误：未捕获的TypeError:无法读取null的属性“currentStyle”，并且无法加载第一个图表我尝试了，但我的第一张图表再次无法加载有人帮忙吗？您遇到了几个问题：图表引用被集合中的最后一个图表覆盖原始源转储中不存在对变量的一些引用需要更改图表数据源引用 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Char

运行时出现以下错误：未捕获的TypeError:无法读取null的属性“currentStyle”，并且无法加载第一个图表我尝试了，但我的第一张图表再次无法加载

有人帮忙吗？

您遇到了几个问题：

图表引用被集合中的最后一个图表覆盖

原始源转储中不存在对变量的一些引用

需要更改图表数据源引用

<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>

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

未加载图表，因为您的代码应该是

项

，而不是

data2.AA[0]

。此外，您的数据对象中没有任何名为

kodu

的属性。请查看下面的工作版本：

var数据2={
抄送：[{
代码：“123ASD”，
标签：[“2018年7月2日”、“2018年7月3日”、“2018年7月4日”、“2018年7月5日”、“2018年7月6日”、“2018年7月9日”、“2018年7月10日”]，
数据集：[{
标签：“AAA”，
背景色：“rgba（255,0,0,1）”，
数据：[32,41,21,78,0,0,0]
},
{
标签：“BBB”，
背景色：“rgba（0255,0,1）”，
数据：[10,80,12,70,65,44,18]
},
{
标签：“CCC”，
背景颜色：“rgba（0,0205,1）”，
数据：[91540023393983347661071]
},
]
},
{
代码：“ASD123”，
标签：[“2018年7月2日”、“2018年7月3日”、“2018年7月4日”、“2018年7月5日”、“2018年7月6日”、“2018年7月9日”、“2018年7月10日”]，
数据集：[{
标签：“AAA”，
背景色：“rgba（255,0,0,1）”，
数据：[55,22,40,2,0,0,0]
},
{
标签：“BBB”，
背景色：“rgba（0255,0,1）”，
数据：[10,2100,0,17,55,74]
},
{
标签：“CCC”，
背景颜色：“rgba（0,0205,1）”，
数据：[232、555、800、900、723、1001、942]
},
]
},
]
};
data2.CC.forEach（功能（项目，arr）{
var chartId=item.code；
var canvas=document.createElement（“canvas”）；
var ctx=canvas.getContext（'2d'）；
var图表=新图表（ctx{
类型：'bar'，
数据：项目：，
选项：{
标题：{
显示：对，
文本：chartId
},
工具提示：{
模式：“索引”，
交集：错
},
回答：是的，
比例：{
xAxes：[{
对,，
}],
雅克斯：[{
是的
}]
}
}
});
document.body.appendChild（画布）；
});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
          }]
        }
      }
    });
  });
});