动态更新ChartJS之后的JavaScript

Question

所以，我正在更新图表，但它的行为有些错误。我正在获取Ajax数据并通过循环更新我的图表数据。我想在代码执行后查看生成的JavaScript代码。参见dynamic charting fiddle

    var ctx = document.getElementById('myChart');

function setEmptyChart(){        
  var ctx = document.getElementById('myChart').getContext('2d');
  var emptyChart = new Chart(ctx, {
    type: 'bar',

    data: 
    {
      labels: [],
      datasets: [ ],
    },
    options: {
              scales: {
                        yAxes: [
                        {
                          ticks: {
                            beginAtZero: true
                          }
                        }]
                      },
              legend: { display: true, position: 'right' },
              title: {display: true, text: 'Empty Chart'},
              layout: {
                padding: {
                    left: 10,
                    right: 0,
                    top: 50,
                    bottom: 0
                }
              }
            }
  });
  return emptyChart;
}


function updateChart(chart, chartType, title, labels, labelDataDict) {
   chart.data.labels.push(labels);
   chart.update();

   // stacked
   if (chartType === 'stacked') {
     chart.type = 'bar';
     Object.entries(labelDataDict).forEach(([key, value]) => {

       //let randomColor = Math.floor(Math.random() * 48824545).toString(16);
       chart.data.datasets.push({
         'label': key,
         'data': value,
         //'backgroundColor': getRandomColor()
       });

       chart.update();

     })

     chart.options = {
       scales: {
         xAxes: [{
           stacked: true
         }],
         yAxes: [{
           stacked: true
         }]
       }
     };

     chart.update();
   }

   // title
   if (title){
     chart.options.title.display = true;
     chart.options.title.text    = title;
   }

   chart.options.legend.position = 'bottom';
   chart.update();
 }

var labels = ['A', 'B', 'C', 'D'];
var labelDataDict = {'category 1': [2,3,4,5] , 'category 2': [4,2,5,6], 'category 3':[3,4,1,5]}

var emptyChart = setEmptyChart();
updateChart(emptyChart, 'stacked', 'Chart Title', labels,  labelDataDict);

应如何显示图表以显示4条，A，B，C，D分别显示一个。每个条应具有堆叠的行为。结果应类似于result fiddle

   var ctx = document.getElementById('myChart');

var labels = ['A', 'B', 'C', 'D'];
var labelDataDict = {'category 1': [2,3,4,5] , 'category 2': [4,2,5,6], 'category 3':[3,4,1,5]}

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [{
                    label: 'category 1',
                    data: [2, 3, 4, 5],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(24, 255, 0, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',

                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',

                    ],
                    borderWidth: 1
                },
                {
                  label: 'category 2',
                  data: [6, 2, 3, 4],
                  backgroundColor: [
                      'rgba(0, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(205, 206, 86, 0.2)',
                      'rgba(75, 192, 192, 0.2)',

                  ],
                  borderColor: [
                      'rgba(0, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(205, 206, 86, 0.2)',
                      'rgba(75, 192, 192, 1)',

                  ],
                  borderWidth: 1
              },
              {
                  label: 'category 3',
                  data: [3, 1, 4, 6],
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 206, 86, 0.2)',
                      'rgba(75, 192, 192, 0.2)',

                  ],
                  borderColor: [
                      'rgba(255, 99, 132, 1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)',
                      'rgba(75, 192, 192, 1)',

                  ],
                  borderWidth: 1
              }


              ]
    },
    options: {
        scales: {
            yAxes: [{ stacked: true,
                      ticks: {
                              beginAtZero: true
                             }
                    }],
            xAxes: [{ stacked: true,}]
        }
    }
});

因此，我需要查看呈现的JavaScript的外观。在调用updateChart之后，有没有办法查看图表的外观？另外，您知道我的代码为何无法正常工作吗？

Answer 1

updateChart功能的主要问题是以下几行。

chart.data.labels.push(labels);

这会将标签数组添加到现有的chart.data.labels数组中。您应该将新标签分配给chart.data.labels。

chart.data.labels = labels;

还有一些其他小问题需要解决。请在下面查看您修改后的代码。

function setEmptyChart() {
  let emptyChart = new Chart('myChart', {
    type: 'bar',
    data: {
      labels: [],
      datasets: [],
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      legend: {
        display: true,
        position: 'right'
      },
      title: {
        display: true,
        text: 'Empty Chart'
      },
      layout: {
        padding: {
          left: 10,
          right: 0,
          top: 50,
          bottom: 0
        }
      }
    }
  });
  return emptyChart;
}

function updateChart(chart, chartType, title, labels, labelDataDict) {
  chart.data.labels = labels;

  // stacked
  if (chartType === 'stacked') {
    chart.type = 'bar';
    Object.keys(labelDataDict).forEach((k, i) => {
      randomColor = Math.floor(Math.random() * 48824545).toString(16);
      chart.data.datasets.push({
        'label': k,
        'data': labelDataDict[k],
        'backgroundColor': ['red', 'blue', 'green'][i]
      });
    });

    chart.options = {
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
    };
  }

  // title
  if (title) {
    chart.options.title = {
      display: true,
      text: title
    };
  }

  chart.options.legend = {
    position: 'bottom'
  };
  chart.update();
}

var labels = ['A', 'B', 'C', 'D'];
var labelDataDict = {
  'category 1': [2, 3, 4, 5],
  'category 2': [4, 2, 5, 6],
  'category 3': [3, 4, 1, 5]
};

var emptyChart = setEmptyChart();
updateChart(emptyChart, 'stacked', 'Chart Title', labels, labelDataDict);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="myChart" height="100"></canvas>