Диаграмма. JS Альтернативный цвет фона для xAxis - PullRequest
Новая
       108

Диаграмма. JS Альтернативный цвет фона для xAxis

0 голосов
/ 14 июля 2020

Добрый вечер,

Есть ли способ изменить цвет фона диаграммы для каждого набора данных результата?

Вот как я sh это.

введите описание изображения здесь

1 Ответ

0 голосов
/ 17 июля 2020

Альтернативный фон может быть создан с использованием диаграммы js -plugin-annotation .

Пожалуйста, посмотрите на приведенный ниже фрагмент кода, полученный из пример кода предоставлен участниками диаграммы js -plugin-annotation.

Этот код работает с Chart. js 2.6.0 и по-прежнему вызывает ошибку сценария, которая может игнорировать. К сожалению, мне не удалось заставить его работать с новейшей версией Chart. js (в настоящее время 2.9.3), и сейчас у меня нет времени на дальнейшие исследования. 

const labels = ["January", "February", "March", "April", "May", "June", "July"];
const annotations = [];
for (let i = 0; i < labels.length; i++) {
  if (i % 2 == 0) {
    annotations.push({
      drawTime: "beforeDatasetsDraw",
      type: "box",
      xScaleID: "x-axis-0",
      yScaleID: "y-axis-0",
      xMin: labels[i],
      xMax: labels[i + 1],
      backgroundColor: "rgba(128, 128, 128, 0.5)",
      borderColor: "rgb(128, 128, 128)",
      borderWidth: 1
    });
  }
};

new Chart('chart', {
  type: "bar",
  data: {
    labels: labels,
    datasets: [{
        label: "Dataset 1",
        backgroundColor: 'red',
        data: [95, 70, 55, -88, -64, 34, -55],
        categoryPercentage: 1,
        barPercentage: 0.8
      },
      {
        label: "Dataset 2",
        backgroundColor: 'green',
        data: [81, 58, 30, -91, -74, 20, -40],
        categoryPercentage: 1,
        barPercentage: 0.9
      }
    ]
  },
  options: {
    responsive: true,
    tooltips: {
      mode: "index",
      intersect: true
    },
    annotation: {
      annotations: annotations
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart" height="90"></canvas>
...