Question

首先，对于破碎的英语感到抱歉。

我使用ChartJS暂时生成图表，但今天我偶然发现了一个我无法找到答案的问题。我使用函数动态地向我的图表添加数据，然后更新它。当我需要添加另一个数据集时，它正在工作，但是当我尝试编辑现有数据集时，我可以获得图表数据集的值（看起来是正确的），但是，图表不会显示新值，即使在更新（）之后。

HTML：

  <div class="row">
    <img id="loading1" class="loading" src="resources/img/loading2.gif" hidden>
    <div id="chart1-wrapper" class="chart-wrapper">
      <canvas id="chart1"></canvas>
    </div>
  </div>
  <script>
    var ctx = document.id("chart1").getContext("2d");
    var chart1 = create_chart("chart title", "label text", "bar"); //Custom code that just create an empty chart;
  </script>

创建图表的功能：

＆＃13;

function create_chart(title, label_prefix, type) {
  var data = {
    labels: [],
    datasets: []
  };
  var options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    legend: {
      display: true
    },
    title: {
      display: true,
      text: title
    },
    tooltips: {
      intersect: false,
      mode: 'x',
      callbacks: {
        title: function() {}
      }
    },
    maintainAspectRatio: false,
    onClick: handleClick
  };
  var chart = new Chart(ctx, {
    type: type,
    data: data,
    options: options
  });
  return chart;
}

＆＃13;

这是我的更新脚本：

function updateChart1(data, sigla){
            var dtsts;
            if(data != null){
                if(chart1.data.datasets.length == 0){
                    dtsts = [];
                    jQuery.each(JSON.parse(data), function(index, val){
                        var media = (val.soma_duracao/val.count_prot)/3600;
                        var dt_item = {
                            label: getMes(val.mes),
                            data: [media],
                            backgroundColor: [(pallete[0].rgba)],
                            borderColor: [(pallete[0].rgba.replace('0.7', '1'))],
                            borderWidth: 2
                        }
                        dtsts.push(dt_item);                        
                    });
                    console.log(dtsts);
                    chart1.data.labels = ['hours'];
                    chart1.options.title.text = "foo bar";
                    chart1.options.title.display = true;
                    chart1.options.legend = true;
                    chart1.options.tooltips.callbacks.label = function(tooltipItems, data) {
                        return tooltipItems.yLabel.toFixed(2) + " hours";
                    }                           
                } else {
                    dtsts = chart1.data.datasets;                               
                    jQuery.each(JSON.parse(data), function(index, val){
                        var media = (val.soma_duracao/val.count_prot)/3600;
                        dtsts[index].data.push(media);
                        dtsts[index].backgroundColor.push(pallete[1].rgba);
                        dtsts[index].borderColor.push(pallete[1].rgba.replace('0.7', '1'));
                    });
                    console.log(dtsts);
                }
                chart1.data.datasets = dtsts;                   
            }
            chart1.update();
        }

第一次运行时运行脚本：

data:Array(1)
0:83.83071111111111
length:1
pop:ƒ ()
push:ƒ ()
shift:ƒ ()
splice:ƒ ()
unshift:ƒ ()
_chartjs: {listeners: Array(1)}
__proto__: Array(0)

再次运行会更新我的数据：

data:Array(2)
0:83.83071111111111
1:13.746988158477201
length:2
pop:ƒ ()
push:ƒ ()
shift:ƒ ()
splice:ƒ ()
unshift:ƒ ()
_chartjs:{listeners: Array(1)}
__proto__:Array(0)

这是我的数据的正确值，但是，图表只是不会更新以显示值。

我不确定这是不是一些愚蠢的错误，但我此时此刻已经迷失了。如果有人可以放光，那就太好了。谢谢！

（PS：如果你们需要更多信息，请告诉我们）

修改只是为了澄清，我需要在更新后的同一数据集中的两个数据，2条数据。

Answer 1

@urukh结果我在答案中犯了一个错误。您需要为条形图添加borderColor和backgroundColor。做了一个向图表添加数据的小例子（参见下面的index.html）。

将数据添加到图表中的必要脚本（setInterval是一个计时器。忽略您的代码逻辑）：

<script>
var i = 0;
setInterval(function()
{
    console.log(myChart.data); // use this to examine the chart object for yourself

    //directly pushing into the arrays
    myChart.data.datasets[0].data.push(21); 
    myChart.data.datasets[0].backgroundColor.push('rgba(255,0,0,0.2)');
    myChart.data.datasets[0].borderColor.push('rgba(255,0,0,1)');
    myChart.data.datasets[1].data.push(21);
    myChart.data.datasets[1].backgroundColor.push('rgba(255,255,0,0.2)');
    myChart.data.datasets[1].borderColor.push('rgba(255,255,0,1)');


    myChart.data.labels.push('hi' + i++);

    //if chart dataset > 10, trim the array from the 1st element
    if (myChart.data.datasets[0].data.length > 10)
    {
        myChart.data.datasets[0].data.shift();
        myChart.data.datasets[1].data.shift();

        myChart.data.datasets[0].backgroundColor.shift();
        myChart.data.datasets[0].borderColor.shift();

        myChart.data.datasets[1].backgroundColor.shift();
        myChart.data.datasets[1].borderColor.shift();
        myChart.data.labels.shift();        
    }

    myChart.update();
}, 1000);

</script>

将此页面设为index.html以查看正在运行的图表。

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>

<div style="width:300px;height: 300px">
<canvas id="myChart" width="100px" height="100px"></canvas>
</div>

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        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)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1

    },
{
        label: '# of Votes 2',
        data: [12, 5, 30, 5, 12, 23],
        backgroundColor: [
            'rgba(255, 0, 132, 0.2)',
            'rgba(54, 0, 235, 0.2)',
            'rgba(255, 0, 86, 0.2)',
            'rgba(75, 0, 192, 0.2)',
            'rgba(153, 0, 255, 0.2)',
            'rgba(255, 0, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,0,132,1)',
            'rgba(54, 0, 235, 1)',
            'rgba(255, 0, 86, 1)',
            'rgba(75, 0, 192, 1)',
            'rgba(153, 0, 255, 1)',
            'rgba(255, 0, 64, 1)'
        ],
        borderWidth: 1
    }

    ]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
});
</script>
<script>
var i = 0;
setInterval(function()
{
    console.log(myChart.data);
    myChart.data.datasets[0].data.push(21);
    myChart.data.datasets[0].backgroundColor.push('rgba(255,0,0,0.2)');
    myChart.data.datasets[0].borderColor.push('rgba(255,0,0,1)');


    myChart.data.datasets[1].data.push(21);
    myChart.data.datasets[1].backgroundColor.push('rgba(255,255,0,0.2)');
    myChart.data.datasets[1].borderColor.push('rgba(255,255,0,1)');


    myChart.data.labels.push('hi' + i++);

    if (myChart.data.datasets[0].data.length > 10)
    {
        myChart.data.datasets[0].data.shift();
        myChart.data.datasets[1].data.shift();

        myChart.data.datasets[0].backgroundColor.shift();
        myChart.data.datasets[0].borderColor.shift();

        myChart.data.datasets[1].backgroundColor.shift();
        myChart.data.datasets[1].borderColor.shift();
        myChart.data.labels.shift();        
    }

    myChart.update();
}, 1000);

</script>

Answer 2

就像Edwin Chua在他的一条评论中提到的那样，问题是我没有为每个数据集添加一个新标签，因此我的图表已更新，但没有＃＆＃ 39;地方＆＃39;显示信息。

该函数的最终代码，如果有人需要它以供将来参考：

function updateChart1(data, sigla){
            if(data != null){               
                var medias = [];
                var meses = [];
                jQuery.each(JSON.parse(data), function(index, val){         
                    medias.push((val.soma_duracao/val.count_prot)/3600);                        
                    if(jQuery.inArray(val.mes, meses) == -1){
                        meses.push(getMes(val.mes));
                    }
                });
                var dtst = {
                    label: sigla,
                    data: medias,
                    backgroundColor: (pallete[0].rgba),
                    borderColor: (pallete[0].rgba.replace('0.7', '1')),
                    borderWidth: 2
                }                   
                chart1.data.labels = meses;
                chart1.data.datasets.push(dtst);
                if(chart1.data.datasets.length == 1){
                    chart1.options.title.text = "foo bar";
                    chart1.options.title.display = true;
                    chart1.options.legend = true;
                    chart1.options.tooltips.callbacks.label = function(tooltipItems, data) {
                        return tooltipItems.yLabel.toFixed(2) + " hours";
                    }
                }   
            }
            chart1.update();
        }

Answer 3

我需要在打印后对图表进行第二次更新（我在黑白打印中使用其他背景颜色）。普通的.update方法没有帮助更新图表。我使用了setTimeout和0。

 setTimeout(function(){
   myChart.data.datasets[0].backgroundColor = ['#f2d13a', '#c9deeb', '#cacaca'];
   myChart.update();
 }, 0);

ChartJs图表不会更新新值

3 个答案: