Блог

Я пытаюсь создать линейный/площадной график, который можно заполнить до определенной точки. Мое лучшее решение на данный момент имеет две основные проблемы. 1, Последняя кривая не совпадает с заполнением. 2, я могу заполнять данные только до точной оси. Я не могу заполнить до 17,5, я должен сделать это точно в точке данных. Моя лучшая попытка: https://codepen.io/MyPenAccount/pen/XWpXyJy

 var ctx = document.getElementById("myChart").getContext("2d");

const colors = {
  darkBlue: {
    fill: '#92bed2',
    stroke: '#3282bf',
  }
};

const data1 = [26, 36, 42, 38, 40, 30, 12];
const data2 = [26, 36, 42, 38, 40, null, null];

const xData = [13, 14, 15, 16, 17, 18, 19];

const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: xData,
    datasets: [{
      label: "Data2",
      fill: true,
      backgroundColor: colors.darkBlue.fill,
      pointBackgroundColor: colors.darkBlue.stroke,
      borderColor: colors.darkBlue.stroke,
      pointHighlightStroke: colors.darkBlue.stroke,
      data: data2,
    }, {
      label: "Data1",
      fill: false,
      data: data1,
    }]
  },
  options: {
    responsive: false,
    scales: {
      yAxes: [{
        stacked: false,
      }]
    },
    animation: {
      duration: 0,
    },
  }
});
 

Я могу использовать нулевые точки в Data1, чтобы скрыть эту линию, но тогда она имеет уродливую кривую, и я все равно не могу заполнить ее до любой точки, кроме точки на оси x.

Я начинаю думать, что у этой проблемы нет решения.

Я также недавно столкнулся с этой проблемой и решил ее, используя решение, аналогичное вашему.

К сожалению, в Chart.js нет простого способа установить цвет фона диаграммы в зависимости от зоны.

Решение. Решение, которое я принял, состояло в том, чтобы создать набор данных для каждого цвета, который я хотел использовать на диаграмме.

Другое решение, которое я попробовал, но оно оказалось менее удовлетворительным, — создать столбчатую диаграмму, высота столбиков которой была равна высоте диаграммы, чтобы я мог раскрасить всю область.