Как прикрепить названия меток к цветам фона в режиме реального времени - PullRequest
Новая
       57

Как прикрепить названия меток к цветам фона в режиме реального времени

0 голосов
/ 01 апреля 2019

Я просто парень, который пытался создать гистограмму, которая динамически обновляется каждые доли секунды.Я обнаружил, что 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);

Заранее спасибо

1 Ответ

0 голосов
/ 01 апреля 2019

Вы можете создать свои данные в одном массиве и отсортировать их по случайному значению для каждого интервала и отсортировать все вместе. 

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/

...