javascript - 动态更新 ChartJS 后的 JavaScript

Question

所以，我正在更新我的图表，它有点行为不端。我正在获取 ajax 数据并通过一个循环来更新我的图表数据。如果可能的话，我想在我的代码执行后查看生成的 JavaScript 代码。见动态图表小提琴

    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 各一个。每个条形图应具有堆叠行为。结果应该看起来像结果小提琴

   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 后查看图表的样子？另外，你知道为什么我的代码不能正常工作吗？

标签： javascriptchart.js

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>