Диаграмма. js динамика c набор данных и всплывающая подсказка на панели с накоплением - PullRequest
Новая
       6

Диаграмма. js динамика c набор данных и всплывающая подсказка на панели с накоплением

0 голосов
/ 10 февраля 2020

Я хочу создать столбчатую диаграмму с накоплением.

Я видел образец и документацию из диаграммы. js, но я не нашел примера использования динамического c набор данных и всплывающая подсказка.

То, что я хочу достичь, похоже на картинку ниже.

enter image description here

Итак, первый столбец с накоплением состоит из двух спецификаций; 15 и 30, сумма до 45. Когда пользователь наводит курсор на этот первый столбец, он покажет подсказку; «15 (1-3)» для нижней планки и «30 (3-6)» для зависания верхней планки. Проблема в том, что я не знаю, как прикрепить динамический набор данных c (за одну дату он будет содержать от 1 до 10 наборов данных) и показать соответствующую подсказку. Я могу сгенерировать линейную / столбчатую диаграмму с динамическими наборами данных c, но столбчатая диаграмма является новой для меня.

Мой json источник данных выглядит следующим образом: 

[
   {
      "date":"2020-02-07",
      "range":"1-3",
      "off":15
   },
   {
      "date":"2020-02-07",
      "range":"3-6",
      "off":30
   },
   {
      "date":"2020-02-08",
      "range":"1-4",
      "off":25
   },
   {
      "date":"2020-02-08",
      "range":"4-5",
      "off":15
   },
   {
      "date":"2020-02-08",
      "range":"5-6",
      "off":15
   }
]

Он должен генерировать следующий столбец с накоплением.

enter image description here

Не могли бы вы дать мне несколько примеров или, может быть, я пропускаю какую-то часть документации, которая уже показывает, что я хочу? *

Спасибо.

1 Ответ

1 голос
/ 10 февраля 2020

Пожалуйста, посмотрите на { ссылка }, чтобы понять, как это в основном работает.

Начиная с этой информации, некоторая обработка данных вместе с использованием диаграммы js -plugin-datalabels приводит вас к следующему примеру кода. 

const data = [
   {
      "date":"2020-02-07",
      "range":"1-3",
      "off":15
   },
   {
      "date":"2020-02-07",
      "range":"3-6",
      "off":30
   },
   {
      "date":"2020-02-08",
      "range":"1-4",
      "off":25
   },
   {
      "date":"2020-02-08",
      "range":"4-5",
      "off":15
   },
   {
      "date":"2020-02-08",
      "range":"5-6",
      "off":15
   }
];

const distinctDates = Array.from(new Set(data.map(o => o.date)));
const dataPerDate = distinctDates.map(d => data.filter(o => o.date == d));
const numberOfDatasets = Math.max.apply(null, dataPerDate.map(data => data.length));
const dataSets = [];
for (let i = 0; i < numberOfDatasets; i++) {
  dataSets.push({
    data: dataPerDate.map(data => i < data.length ? data[i].off : 0),
    ranges: dataPerDate.map(data => i < data.length ? data[i].range : ''),
    backgroundColor: distinctDates.map(d => 
      "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 0.5)"),
    categoryPercentage: 1,
    barPercentage: 1
  }); 
}

new Chart(document.getElementById("myChart"), {
  type: "bar",
  data: {
    labels: distinctDates,
    datasets: dataSets
  },
  options: {
    plugins: {
	  datalabels: {
        display: context => context.dataset.data[context.dataIndex] > 0,
        formatter: (value, context) => value + ' (' + context.dataset.ranges[context.dataIndex] + ')'
			}
		},
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    },
    scales: {
      xAxes: [{
         stacked: true
      }],
      yAxes: [{
        stacked: true
      }]      
    }
  }
});
canvas {
  max-width: 300px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas id="myChart" width="100" height="100"></canvas>
...