如何在实时图表中粘贴标签名称及其背景颜色

Question

我只是一个试图制作条形图，每秒钟动态更新的人。我发现JS是个不错的选择（我无法弄清楚如何使用Excel）。

在对JS进行一些研究并最终使其动态化并按最高值排序后，我发现了一些问题，我希望你能帮助我：

1. 我希望背景颜色坚持标签名称（狗，牛，猪等）。现在它坚持你可以看到的排序值。
2. 我找不到在哪里放置setInterval来更新值和位置（我一直试图把它放在代码的不同部分，但我找不到合适的位置）。现在它每隔3秒制作整个图表（我只想更新值和位置）。我认为通过这样做，它将显示值更平滑的过渡。

Link to the fiddle

const CHART = document.getElementById("chart");

Chart.defaults.global.animation.duration = 1000;

Chart.plugins.register({
  beforeUpdate: function(chart) {
if (chart.options.sort) {
  let dataArray = chart.data.datasets[0].data.slice();
  let dataIndexes = dataArray.map((d, i) => i);
  dataIndexes.sort((a, b) => {
    return dataArray[a] - dataArray[b];
  });

  // sort data array as well
  dataArray.sort((a, b) => b - a);

  // At this point dataIndexes is sorted by value of the data, so we know how the indexes map to each other
  let meta = chart.getDatasetMeta(0);
  let newMeta = [];
  let labels = chart.data.labels;
  let newLabels = [];


  meta.data.forEach((a, i) => {
    newMeta[dataIndexes[i]] = a;
    newLabels[dataIndexes[i]] = chart.data.labels[i];
  });

  meta.data = newMeta;
  chart.data.datasets[0].data = dataArray;
  chart.data.labels = newLabels;
    }
  }
});

setInterval(function() {
let barChart = new Chart(CHART,  {
  type: 'horizontalBar',
  data: {
labels: ['Chicken', 'Tuna', 'Cow', 'Pig', 'Dog', 'Mermaid'],
datasets: [{
  label: "Animals (and Mermaid)",
  //How to stick this background colors to each label
  backgroundColor: [
    "#467261",
    "#556e69",
    "#555341",
    "#4e6577",
    "#537061",
    "#44656e"
  ],

  data: [Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000]

}]
  },
  options: {
scales: {
  xAxes: [{
    ticks: {
      beginAtZero: true
    }
  }],
  yAxes: [{
    barThickness: 30
  }]

}
  }

});

    barChart.options.sort = true;
  barChart.update();
  },3000);

提前致谢

Answer 1

您可以在单个阵列中创建数据，并按每个间隔的随机值对其进行排序，并将它们一起排序。

var adata = [
    ["Chicken", "red", Math.random()*1000],
    ["Tuna",    "#556e69", Math.random()*1000],
    ["Cow",     "#555341", Math.random()*1000],
    ["Pig",     "#4e6577", Math.random()*1000],
    ["Dog",     "#537061", Math.random()*1000],
    ["Mermaid", "#44656e", Math.random()*1000],
];
adata.sort(function(a, b) {return b[2] - a[2];});

然后，您必须删除beforeUpdate中完成的所有排序功能。

但是：ぁzxswい