Question

所以我想更新图表中的2个数据集（我不想销毁然后重新创建）。

 
 <link  rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<div class="team">
  <div class="container">
    <div class="w3l-heading">
      <h3>Our Team</h3>
    </div>
    <div class="row team-row  justify-content-sm-center">
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Edwards Doe</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
      <div class="col-md-3 col-sm-3 team-grids">
        <div class="team-img">
          <img class="img-responsive" src="https://gyazo.com/2fac18f9f6395e4815234d5512de6cba.png" alt="">
          <div class="captn">
            <div class="captn-top">
              <h4>Mark Sophia</h4>
              <p>description</p>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

当我尝试设置第二个数据集chart2 = window.TrafficChart; chart2.data.labels = data.timestamps; console.log(data.traffic_tx); chart2.data.datasets[0] = data.traffic_rx; chart2.data.datasets[1] = data.traffic_tx; // fails here chart2.update();时，崩溃不会更新（一切都为空）。

在过去30分钟内搜索解决方案。

Answer 1

您可以循环浏览图表以一起更新它们。

以下是ChartJS documentation中的一段代码：

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

您可能还需要检查并查看是否正在访问正确的变量。您是要替换数据集中的整个data对象，还是要更新dataset.data属性？

Answer 2

这可能是旧的，但我有同样的问题，甚至2年后（这个问题存在的）我不能很容易地找到一个很好的答案。最终我做到了，所以就这样，如果不是为了其他任何事情，而是为了让其他人更容易找到它。

var this_data=[50,100];    //data to be loaded on the different datasets. this_data[0] to be loaded in dataset[0], this_data[1] to be loaded in dataset[1] and so on
var this_cntr;             //a counter to iterate over this_data


this_cntr= 0;
myChart.data.datasets.forEach(iterate);
//myChart.data.labels.push('label_name');   //these are to update the graph
//myChart.update('none');


function iterate(item) {
    item.data.push(this_data[this_cntr]);
    this_cntr= this_cntr+ 1
}

有可能是这样的简写版的我真的不关心shorthands.Maybe别人能做到这一点。

Answer 3

检查 datasets 数组的长度。如果第二个 data 键不存在，则创建它。

let length = chart2.data.datasets.length;
if (length > 1) {
   chart2.data.datasets[1] = data.traffic_tx;
} else {
   chart2.data.datasets[] = {data: data.traffic_tx};
}

或者更动态的东西：

let length = chart2.data.datasets.length;
let i = 0;
Object.entries(data).forEach([key, value] => {
    if (i < length) {
        chart2.data.datasets[i] = value;
    } else {
        chart2.data.datasets[] = {data: value};
    }
    i++;
});

ChartJS更新具有多个数据集的图表

3 个答案: