Как я могу использовать chart.js для создания диаграммы, на которой одновременно есть одна линия временного ряда и одна линейная линия?

Я хочу нарисовать опорную линию на диаграмме временных рядов. Я попытался использовать две оси x и две оси y, поэтому у меня есть два графика в одном. один будет отображать линию шкалы времени, а другой - линейную линию (опорную линию).

Пример изображения того, как я хочу, чтобы это выглядело:

Я пробовал в скрипке, но похоже, что две оси X связаны и не масштабируются отдельно:

var data = {
  labels: [],
  datasets: [{
    fill: 'none',
    label: 'signal1',
    backgroundColor: 'rgba(75,192,192,0.4)',
    pointRadius: 5,
    pointHoverRadius: 7,
    borderColor: 'rgba(75,192,192,1)',
    borderWidth: 1,
    lineTension: 0,
    xAxisID: 'xAxis1',
    yAxisID: 'yAxis1',
    data: [{
        x: '2016-07-17',
        y: 44
      },
      {
        x: '2016-07-19',
        y: 50
      },
      {
        x: '2016-07-22',
        y: 84
      },
    ],
  }, {
    fill: 'none',
    label: 'signal2',
    lineTension: 0,
    xAxisID: 'xAxis2',
    yAxisID: 'yAxis2',
    data: [{
        x: 0,
        y: 55
      },
      {
        x: 1,
        y: 55
      },
    ]
  }],
};
var option = {
  scales: {
    yAxes: [{
      id: 'yAxis1',
      offset: true,
      gridLines: {
        color: 'rgba(151, 151, 151, 0.2)',
        display: true,
        zeroLineColor: '#979797',
        zeroLineWidth: 1,
        tickMarkLength: 15,
        drawBorder: true,
      },
      ticks: {
        beginAtZero: false,
        padding: 5,
        fontSize: 12,
        fontColor: '#222222',
      },
    }, {
      id: 'yAxis2',
      gridLines: {
        color: 'rgba(151, 151, 151, 0.2)',
        display: false,
        drawBorder: false,
      },
      ticks: {
        beginAtZero: false,
      },
    }],
    xAxes: [{
      id: 'xAxis1',
      offset: true,
      bounds: 'data',
      type: 'time',
      distribution: 'linear',
      time: {
        unit: 'day',
        displayFormats: {
          day: 'D.M.YYYY',
        },
      },
      gridLines: {
        display: true,
        color: 'rgba(151, 151, 151, 0.2)',
        zeroLineColor: '#979797',
        zeroLineWidth: 1,
        tickMarkLength: 5,
        drawBorder: true,
      },
      ticks: {
        source: 'auto',
        autoSkip: true,
        autoSkipPadding: 30,
        maxRotation: 0,
        padding: 2,
        fontSize: 12,
        fontColor: '#222222',
      },
    }, {
      id: 'xAxis2',
      type:"linear",
      gridLines: {
        display: false,
        drawBorder: false,
      },
    }]
  }
};

https://jsfiddle.net/2gyk9v5e/15/

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
160
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это можно сделать с помощью Plugin Core API . API предлагает различные хуки, которые можно использовать для выполнения пользовательского кода. В вашем случае вы можете использовать хук afterDraw, чтобы рисовать нужные линии прямо на холсте, используя CanvasRenderingContext2D.

plugins: [{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    var xAxis = chart.scales['x-axis-0'];
    var yAxis = chart.scales['y-axis-0'];
    ctx.save();
    chart.data.datasets[0].refLines.forEach(r => {
      var y = yAxis.getPixelForValue(r.y);
      ctx.strokeStyle = r.color;
      ctx.beginPath();
      ctx.moveTo(xAxis.left, y);
      ctx.lineTo(xAxis.right, y);
      ctx.stroke();
    });
    ctx.restore();
  }
}],

Приведенный выше код предполагает, что опорные линии определены внутри вашего dataset с помощью следующего определения.

refLines: [
  { y: 45, color: '#0be059' },
  { y: 49, color: '#fc3503' }
]

Пожалуйста, взгляните на свой измененный код и посмотрите, как он работает.

new Chart('canvas', {
  type: 'line',
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      ctx.save();
      chart.data.datasets[0].refLines.forEach(r => { 
        var y = yAxis.getPixelForValue(r.y);
        ctx.strokeStyle = r.color;
        ctx.beginPath();
        ctx.moveTo(xAxis.left, y);
        ctx.lineTo(xAxis.right, y);
        ctx.stroke();
      });
      ctx.restore();
    }
  }],
  data: {
    datasets: [{
      fill: false,
      label: 'signal1',
      backgroundColor: 'rgba(75,192,192,0.4)',
      pointRadius: 5,
      pointHoverRadius: 7,
      borderColor: 'rgba(75,192,192,1)',
      borderWidth: 1,
      lineTension: 0,
      data: [
        { x: '2016-07-14', y: 44 },
        { x: '2016-07-15', y: 52 },
        { x: '2016-07-16', y: 45 },
        { x: '2016-07-17', y: 47 },
        { x: '2016-07-18', y: 35 },
        { x: '2016-07-19', y: 46 },
        { x: '2016-07-20', y: 50 },
        { x: '2016-07-21', y: 44 }
      ],
      refLines: [
        { y: 45, color: '#0be059' },
        { y: 49, color: '#fc3503' }
      ]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          color: 'rgba(151, 151, 151, 0.2)',
          display: false,
          drawBorder: false
        }
      }],
      xAxes: [{
        offset: true,
        bounds: 'data',
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'D.M.YYYY',
          }
        },
        gridLines: {
          color: 'rgba(151, 151, 151, 0.2)',
          zeroLineColor: '#979797',
          zeroLineWidth: 1,
          tickMarkLength: 5,
          drawBorder: true
        }
      }]
    }
  }
});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>
<canvas id = "canvas" height = "80"></canvas>

Другие вопросы по теме