javascript - color - Chart.js: dibujar una línea vertical arbitraria

stacked bar chart js

Question

¿Cómo puedo dibujar una línea vertical en un punto particular en el eje x usando Chart.js?

En particular, quiero dibujar una línea para indicar el día actual en un LineChart. Aquí hay una maqueta del gráfico: http://i.stack.imgur.com/VQDWR.png

http://i.stack.imgur.com/VQDWR.png

Answer 1

Aquí hay un lápiz que logra un efecto similar sin la anotación chartjs-plugin, o pirateando cómo se representa Chart.js, o cualquier otro complemento: https://codepen.io/gkemmey/pen/qBWZbYM

Enfoque

1. Use un gráfico de barras / líneas combinado y use el gráfico de barras para dibujar las líneas verticales.
2. Use dos ejes y: uno para el gráfico de barras (que no mostramos) y otro para todos los demás conjuntos de datos del gráfico de líneas.
3. Fuerce los ejes y del gráfico de barras a min: 0 y max: 1 . Cada vez que desee dibujar una línea vertical, agregue un objeto de datos como { x: where_the_line_goes, y: 1 } a su dataset de gráfico de barras.
4. El lápiz también agrega algunos datos personalizados al conjunto de datos del gráfico de barras y un filtro de leyenda y devolución de llamada de etiqueta para excluir el conjunto de datos del gráfico de barras de la leyenda y controlar la etiqueta en la línea vertical.

Pros

1. No hay otras dependencias. Sin parches / extensiones de mono personalizados.
2. El complemento de anotaciones no parece mantenerse activamente. Por ejemplo, atm, sus controladores de eventos arrojan un error sobre "prevenir el incumplimiento en eventos pasivos"
3. Tal vez un profesional: el complemento de anotaciones siempre muestra las etiquetas de las líneas dibujadas, y tiene que usar sus devoluciones de llamadas de eventos para obtener un efecto de mostrar al pasar el ratón. La información sobre herramientas de Chart.js se muestra al pasar el mouse por defecto.

Contras

1. Estamos agregando datos personalizados en la configuración del conjunto de datos y esperamos que no entre en conflicto con nada de lo que Chart.js está haciendo. Son datos Chart.js no espera estar allí, pero a partir de 2.8, tampoco lo rompe.

Answer 2

Compartir mi solución para chartjs.org versión 2.5. Quería usar un complemento, para que la implementación sea reutilizable.

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);

El uso es simple entonces:

 new Chart(ctx, {
     type: ''line'',
     data: data,
     label: ''Progress'',
     options: options,
     lineAtIndex: [2,4,8],
 })

El código anterior inserta líneas verticales rojas en las posiciones 2,4 y 8, pasando por los puntos del primer conjunto de datos en esas posiciones.

Answer 3

Recomiendo utilizar Chartjs-Plugin-Annotation .

Un ejemplo se puede encontrar en 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"
            }
          }
        ]
      }
    }
  });
};

Eche un vistazo aquí para obtener más detalles: https://.com/a/36431041

Answer 4

Tuve que pasar por la molestia de descubrir cómo hacer algo similar con ChartJS 2.0, así que pensé en compartirlo.

Esto se basa en la nueva forma de anular un prototipo de gráfico como se explica aquí: 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);
};

Answer 5

Actualización : esta respuesta es para Chart.js 1.x, si está buscando una respuesta 2.x, revise los comentarios y otras respuestas.

Extiende el gráfico de líneas e incluye la lógica para dibujar la línea en la función de dibujo.

Avance

HTML

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

Guión

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
});

La propiedad de opción lineAtIndex controla en qué punto dibujar la línea.

Fiddle - http://jsfiddle.net/dbyze2ga/14/