Chart.js - рисование произвольной вертикальной линии

Ответ 1

Обновление - этот ответ предназначен для Chart.js 1.x, если вы ищете ответ 2.x, проверьте комментарии и другие ответы.

Вы расширяете линейный график и включаете логику для рисования линии в функцию рисования.

Просмотр

HTML

<div>
    <canvas id="LineWithLine" width="600" height="400"></canvas>
</div>

Script

var data = {
    labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
    datasets: [{
        data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }]
};

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

Chart.types.Line.extend({
    name: "LineWithLine",
    draw: function () {
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var point = this.datasets[0].points[this.options.lineAtIndex]
        var scale = this.scale

        // draw line
        this.chart.ctx.beginPath();
        this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
        this.chart.ctx.strokeStyle = '#ff0000';
        this.chart.ctx.lineTo(point.x, scale.endPoint);
        this.chart.ctx.stroke();

        // write TODAY
        this.chart.ctx.textAlign = 'center';
        this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
    }
});

new Chart(ctx).LineWithLine(data, {
    datasetFill : false,
    lineAtIndex: 2
});

Свойство параметра lineAtIndex определяет, в какой точке рисовать линию.

Скрипка - http://jsfiddle.net/dbyze2ga/14/

Ответ 2

Совместное использование моего решения для версии 4.2. Я хотел использовать плагин, чтобы сделать повторное использование.

const verticalLinePlugin = {
  getLinePosition: function (chart, pointIndex) {
      const meta = chart.getDatasetMeta(0); // first dataset is used to discover X coordinate of a point
      const data = meta.data;
      return data[pointIndex]._model.x;
  },
  renderVerticalLine: function (chartInstance, pointIndex) {
      const lineLeftOffset = this.getLinePosition(chartInstance, pointIndex);
      const scale = chartInstance.scales['y-axis-0'];
      const context = chartInstance.chart.ctx;

      // render vertical line
      context.beginPath();
      context.strokeStyle = '#ff0000';
      context.moveTo(lineLeftOffset, scale.top);
      context.lineTo(lineLeftOffset, scale.bottom);
      context.stroke();

      // write label
      context.fillStyle = "#ff0000";
      context.textAlign = 'center';
      context.fillText('MY TEXT', lineLeftOffset, (scale.bottom - scale.top) / 2 + scale.top);
  },

  afterDatasetsDraw: function (chart, easing) {
      if (chart.config.lineAtIndex) {
          chart.config.lineAtIndex.forEach(pointIndex => this.renderVerticalLine(chart, pointIndex));
      }
  }
  };

  Chart.plugins.register(verticalLinePlugin);

Ответ 3

Мне пришлось столкнуться с проблемой выяснения того, как сделать что-то похожее с ChartJS 2.0, поэтому я решил поделиться.

Это основано на новом способе переопределения прототипа диаграммы, как описано здесь: https://github.com/chartjs/Chart.js/issues/2321

var ctx = document.getElementById('income-chart');

var originalDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function (ease) {
    originalDraw.call(this, ease);

    var point = dataValues[vm.incomeCentile];
    var scale = this.chart.scales['x-axis-0'];

    // calculate the portion of the axis and multiply by total axis width
    var left = (point.x / scale.end * (scale.right - scale.left));
                
    // draw line
    this.chart.chart.ctx.beginPath();
    this.chart.chart.ctx.strokeStyle = '#ff0000';
    this.chart.chart.ctx.moveTo(scale.left + left, 0);
    this.chart.chart.ctx.lineTo(scale.left + left, 1000000);
    this.chart.chart.ctx.stroke();

    // write label
    this.chart.chart.ctx.textAlign = 'center';
    this.chart.chart.ctx.fillText('YOU', scale.left + left, 200);
};

Ответ 4

Я настоятельно рекомендую использовать Chartjs-Plugin-Annotation.

Пример можно найти на CodePen

var chartData = {
  labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
  datasets: [
    {
      data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
    }
  ]
};

window.onload = function() {
  var ctx = document.getElementById("canvas").getContext("2d");
  new Chart(ctx, {
    type: "line",
    data: chartData,
    options: {
      annotation: {
        annotations: [
          {
            type: "line",
            mode: "vertical",
            scaleID: "x-axis-0",
            value: "MAR",
            borderColor: "red",
            label: {
              content: "TODAY",
              enabled: true,
              position: "top"
            }
          }
        ]
      }
    }
  });
};

Подробнее здесь: fooobar.com/questions/176844/...

Ответ 5

Вот перо, которое достигает аналогичного эффекта без аннотации chartjs-plugin-annotation, или без хакерской визуализации Chart.js или любых других плагинов: https://codepen.io/gkemmey/pen/qBWZbYM

подход

1. Используйте комбинированную линейчатую/линейную диаграмму и используйте линейчатую диаграмму для рисования вертикальных линий.
2. Используйте две оси Y: одну для гистограммы (которую мы не отображаем) и одну для всех остальных наборов данных линейной диаграммы.
3. Выньте оси Y столбчатой диаграммы в min: 0 и max: 1. В любое время, когда вы хотите нарисовать вертикальную линию, добавьте объект данных, например { x: where_the_line_goes, y: 1 }, в ваш набор данных гистограммы.
4. Перо также добавляет некоторые пользовательские данные в набор данных гистограммы, фильтр легенды и обратный вызов метки, чтобы исключить набор данных гистограммы из легенды и контролировать метку на вертикальной линии.

Доводы

1. Других зависимостей нет. Никаких нестандартных исправлений/расширений.
2. Плагин аннотаций, похоже, активно не поддерживается. Например, atm, их обработчики событий выдают ошибку о "предотвращении дефолта для пассивных событий"
3. Возможно профессионал: плагин аннотаций всегда показывает метки нарисованных линий, и вы должны использовать их обратные вызовы событий, чтобы получить эффект показа при наведении. Подсказки Chart.js по умолчанию отображаются при наведении курсора.

Против

1. Мы добавляем пользовательские данные в конфигурацию набора данных и надеемся, что они не конфликтуют ни с чем, что делает Chart.js. Это данные Chart.js не ожидает там, но с 2.8, также не нарушает его.