ChartJS 如何更新图表js标签的多个数据变量

3zwtqj6y 于 2022-12-13 发布在 Chart.js

关注(0)|答案(1)|浏览(250)

我尝试使用变量名为“data”的两个数据输入点动态更新我的线路聊天
见下文

var lion =  new Chart(ctx2, {
      type: "line",
      data: {
        labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        datasets: [{
            label: "Mobile apps",
            tension: 0.4,
            borderWidth: 0,
            pointRadius: 0,
            borderColor: "#cb0c9f",
            borderWidth: 3,
            backgroundColor: gradientStroke1,
            fill: true,
            data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
            maxBarThickness: 6

          },
          {
            label: "Websites",
            tension: 0.4,
            borderWidth: 0,
            pointRadius: 0,
            borderColor: "#3A416F",
            borderWidth: 3,
            backgroundColor: gradientStroke2,
            fill: true,
            data: [30, 90, 40, 140, 290, 290, 340, 230, 400],
            maxBarThickness: 6
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false,
          }
        },
        interaction: {
          intersect: false,
          mode: 'index',
        },
        scales: {
          y: {
            grid: {
              drawBorder: false,
              display: true,
              drawOnChartArea: true,
              drawTicks: false,
              borderDash: [5, 5]
            },
            ticks: {
              display: true,
              padding: 10,
              color: '#b2b9bf',
              font: {
                size: 11,
                family: "Open Sans",
                style: 'normal',
                lineHeight: 2
              },
            }
          },
          x: {
            grid: {
              drawBorder: false,
              display: false,
              drawOnChartArea: false,
              drawTicks: false,
              borderDash: [5, 5]
            },
            ticks: {
              display: true,
              color: '#b2b9bf',
              padding: 20,
              font: {
                size: 11,
                family: "Open Sans",
                style: 'normal',
                lineHeight: 2
              },
            }
          },
        },
      },
    });

我尝试使用以下方法动态更新：

setInterval(function(){ 
    //code goes here that will be run every 5 seconds.    

    lion.data.datasets[0].data = [getRandomInt(100), getRandomInt(100), getRandomInt(100),getRandomInt(100),getRandomInt(100),getRandomInt(100),getRandomInt(100),getRandomInt(100),getRandomInt(100)],
//finally update chart var:
lion.update();


}, 2000);

这每2秒更新数据变量。
我原以为它会更新两个标签的数据变量，但它没有。它只更新“网站”的数据
如何定位和更新两个标签上的两个数据变量？

chart.js

来源：https://stackoverflow.com/questions/74696849/how-can-i-update-multiple-data-variables-of-chart-js-label

1条答案

按热度按时间

ha5z0ras1#

您需要更新所有数据集，而不仅仅是第一个数据集。

setInterval(function() {
  //code goes here that will be run every 5 seconds.    

  lion.data.datasets[0].data = [getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100)];
  lion.data.datasets[1].data = [getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100)];
  //finally update chart var:
  lion.update();

}, 2000);

也可以不进行硬编码，而是循环遍历它们

setInterval(function() {
  //code goes here that will be run every 5 seconds.    

  lion.data.datasets.forEach(dataset => dataset.data = [getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100), getRandomInt(100)]);
  //finally update chart var:
  lion.update();

}, 2000);

赞(0）回复(0）举报 2022-12-13

我来回答

ChartJS 如何更新图表js标签的多个数据变量

1条答案

相关问题

热门标签

最新问答