时间戳

首页 > 解决方案 > 如何在实时图表中粘贴标签名称及其背景颜色

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

问题描述

我只是一个试图制作每秒钟动态更新的条形图的人。我发现 JS 是一个不错的选择（我不知道如何用 Excel 来做）。

在对 JS 做了一些研究并最终使其动态化并按从高到低排序后，我发现了一些问题，希望您能帮助我：

  1. 我希望背景颜色与标签名称（狗、牛、猪等）保持一致。现在它坚持按您所见排序的值。
  2. 我找不到在哪里放置 setInterval 来更新值和位置（我一直试图将它放在代码的不同部分，但我找不到正确的位置）。现在它每 3 秒制作一次整个图表（我只想更新值和位置）。我认为这样做会显示出更平滑的价值观转变。

链接到小提琴

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);

提前致谢

标签： javascriptgraphlabelbar-chart

解决方案

您可以在单个数组中创建数据，并按每个间隔的随机值对其进行排序，然后将它们全部排序。

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 中完成的所有排序功能。

演示：https ://jsfiddle.net/2dyfa0xj/

推荐阅读