Home / Questions / 51932
Accepted
Pavlo B.
Asked: 2020-02-28 03:06:00 +0800 CST 2020-02-28 03:06:00 +0800 CST

chartjs中的水平“限制”线

  • 772

我正在制作一个图表，我需要让它在它的 X 点放置一条水平线

这是我图表的“脚本”；

var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
      datasets: [{
        label: 'Reparaciones x dia',
        data: ['0', '4', '1', '3', '1', '0', '0', '1', '11', '4', '8', '7', '5', '1', '2', '5', '3', '8', '1', ],
        backgroundColor: "rgba(0,255,51,0.5)"
      }, {
        label: 'Totales',
        data: [0, 4, 5, 8, 9, 9, 9, 10, 21, 25, 33, 40, 45, 50, 51, 53, 58, 61, 69, 73],
        backgroundColor: "rgba(0,153,255,0.5)"
      }]
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>

我需要一条线，例如在垂直轴的第 15 号...

jquery

2 Answers

  1. Best Answer

    您可以为 Chart.js 创建自己的插件，它将在图表上绘制您想要的线条。例如，如果您希望插件在 的值上画一条水平线y，您的代码应遵循以下算法：

    • 添加一个选项，其值是y您要显示水平线的位置（这将options在您创建图表时在内部完成）
    • 创建一个执行以下操作的插件：
      • 检测是否传递了一个值来绘制水平线
      • 计算应在图形内绘制线的高度
      • 将自己定位在位置 x=0 的那个高度（使用moveTo）
      • 创建一条线，直到 x=图形的宽度（使用lineTo）
      • 指定线条的颜色（使用style）
      • 画线（用stroke）

    然后，您可以扩展该插件以允许多条水平线、标记线、自定义颜色、不透明度等……但我将自己限制在最基本的版本：固定颜色的单线。

    在这里你可以看到这个插件的代码工作：

    var chartPluginLineaHorizontal = {
  afterDraw: function(chartobj) {
    if (chartobj.options.lineaHorizontal) {
      var ctx = chartobj.chart.ctx;
      var valorY = chartobj.scales["y-axis-0"].getPixelForValue(chartobj.options.lineaHorizontal);
      ctx.beginPath();
      ctx.moveTo(0, valorY);
      ctx.lineTo(chartobj.chart.width, valorY);
      ctx.strokeStyle = "red";
      ctx.stroke();
    }
  }
}
Chart.pluginService.register(chartPluginLineaHorizontal);

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
    datasets: [{
      label: 'Reparaciones x dia',
      data: ['0', '4', '1', '3', '1', '0', '0', '1', '11', '4', '8', '7', '5', '1', '2', '5', '3', '8', '1', ],
      backgroundColor: "rgba(0,255,51,0.5)"
    }, {
      label: 'Totales',
      data: [0, 4, 5, 8, 9, 9, 9, 10, 21, 25, 33, 40, 45, 50, 51, 53, 58, 61, 69, 73],
      backgroundColor: "rgba(0,153,255,0.5)"
    }]
  },
  options: {
    lineaHorizontal: 15
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>

    作为我上面的扩展，这里我留下一个更复杂的插件，它可以让你绘制水平线或垂直线，还可以选择颜色或标签（我在短时间内完成了它可以通过减少代码进行改进，然后在我有更多时间时更新它）：

    var chartPluginLineaHorizontal = {
  afterDraw: function(chartobj) {
    if (chartobj.options.lines) {
      var ctx = chartobj.chart.ctx;
      for (var idx = 0; idx < chartobj.options.lines.length; idx++) {
        var line = chartobj.options.lines[idx];
        line.iniCoord = [0,0];
        line.endCoord = [0,0];
        line.color = line.color ? line.color : "red";
        line.label = line.label ? line.label : "";
        if (line.type == "horizontal" && line.y) {
          line.iniCoord[1] = line.endCoord[1] = chartobj.scales["y-axis-0"].getPixelForValue(line.y);
          line.endCoord[0] = chartobj.chart.width;
        } else if (line.type == "vertical" && line.x) {
          line.iniCoord[0] = line.endCoord[0] = chartobj.scales["x-axis-0"].getPixelForValue(line.x);
          line.endCoord[1] = chartobj.chart.height;
        }
        ctx.beginPath();
        ctx.moveTo(line.iniCoord[0], line.iniCoord[1]);
        ctx.lineTo(line.endCoord[0], line.endCoord[1]);
        ctx.strokeStyle = line.color;
        ctx.stroke();
        ctx.fillStyle = line.color;
        ctx.fillText(line.label, line.iniCoord[0] + 3, line.iniCoord[1] + 3);
      }
    }
  }
}
Chart.pluginService.register(chartPluginLineaHorizontal);

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
    datasets: [{
      label: 'Reparaciones x dia',
      data: ['0', '4', '1', '3', '1', '0', '0', '1', '11', '4', '8', '7', '5', '1', '2', '5', '3', '8', '1', ],
      backgroundColor: "rgba(0,255,51,0.5)"
    }, {
      label: 'Totales',
      data: [0, 4, 5, 8, 9, 9, 9, 10, 21, 25, 33, 40, 45, 50, 51, 53, 58, 61, 69, 73],
      backgroundColor: "rgba(0,153,255,0.5)"
    }]
  },
  options: {
    lines: [
      {
        type: "horizontal",
        y: 15,
        color: "blue",
        label: "min"
      },
      {
        type: "horizontal",
        y: 32,
        color: "red",
        label: "max"
      },
      {
        type: "vertical",
        x: 12,
        color: "green",
        label: "aux"
      }
    ]
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>

    • 11

  2. 您必须扩展库以绘制线条。

    var originalLineDraw = Chart.controllers.line.prototype.draw;
var ctx = document.getElementById('myChart').getContext('2d');

Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    originalLineDraw.apply(this, arguments);

    var chart = this.chart;
    var ctx = chart.chart.ctx;

    var index = chart.config.data.lineAtIndex;
    if (index) {
      var xaxis = chart.scales['x-axis-0'];
      var yaxis = chart.scales['y-axis-0'];

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.left, yaxis.getPixelForValue(index, undefined));
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.right, yaxis.getPixelForValue(index, undefined));
      ctx.stroke();
      ctx.restore();
    }
  }
});

new Chart(ctx,  {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, ],
    datasets: [{
      label: 'Reparaciones/día',
      data: ['0', '4', '1', '3', '1', '0', '0', '1', '11', '4', '8', '7', '5', '1', '2', '5', '3', '8', '1', ],
      backgroundColor: "rgba(0,255,51,0.5)"
    }, {
      label: 'Totales',
      data: [0, 4, 5, 8, 9, 9 ,9 , 10, 21, 25, 33, 40, 45, 50, 51, 53, 58, 61, 69, 68],
      backgroundColor: "rgba(0,153,255,0.5)"
    }],
    lineAtIndex: 15
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>

    • 5