Question

我对chart.js有点新鲜，如果问题很简单，请原谅我： - ）

我有一个折线图，它使用两个数据集来显示该线。我这样做是因为我希望每个数据集都有不同的背景颜色。这没有问题。

我试图在第一个数据集的末尾绘制一条水平线（通常位于图表的中间）。我可以使用scales.right值/ 2，但这不起作用。我需要弄清楚第一个数据集的正确位置。有谁能够帮我？非常感谢你！

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

Chart.pluginService.register({
afterDraw: function(chart) {

        var ctxPlugin = chart.chart.ctx;

        ctxPlugin.beginPath();
        ctxPlugin.moveTo(chart.scales["x-axis-0"].right/2, 200);
        ctxPlugin.strokeStyle = "#ff0000";
        ctxPlugin.lineTo(chart.scales["x-axis-0"].right/2,20);
        ctxPlugin.stroke();

        ctxPlugin.textAlign = 'center';
        ctxPlugin.fillText("AVERAGE", chart.scales["x-axis-0"].right/2, 40);

}
});



var myChart = new Chart(ctx, {
type: 'line',
data: {

    labels: [0,10,20,30,40,50,60,70,80,90,100],
    datasets: [
  {
    label: "My First dataset",
    data: [0, 20, 30, 40,40,40,null,null,null,null,null],
    backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
        ]
  },
  {
    label: "My Second dataset",
    data: [null,null,null,null,null,40,40,40,40,50,60],
            backgroundColor: [
              "rgba(151,187,205,0.2)"
        ]
        ,
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
  }
]
},
 title: {
display: true,
text:'d',

}

});

Example of my Chart

Answer 1

试试这个

var originalLineDraw = Chart.controllers.line.prototype.draw;
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.getPixelForValue(undefined, index), 200);
      ctx.strokeStyle = '#ff0000';
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), 20);
      ctx.stroke();
      ctx.restore();
      ctx.textAlign = 'center';
      ctx.fillText("AVERAGE", xaxis.getPixelForValue(undefined, index), 40);
    }
  }
});
var config = {
  type: 'line',
  data: {

    labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
    lineAtIndex: 5,
    datasets: [{
        label: "My First dataset",
        data: [0, 20, 30, 40, 40, 40, null, null, null, null, null],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
        ]
      },
      {
        label: "My Second dataset",
        data: [null, null, null, null, null, 40, 40, 40, 40, 50, 60],
        backgroundColor: [
          "rgba(151,187,205,0.2)"
        ],
        strokeColor: "rgba(151,187,205,1)",
        pointColor: "rgba(151,187,205,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(151,187,205,1)",
      }
    ]
  },
  title: {
    display: true,
    text: 'd',

  },


};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>

<canvas id="myChart" width="400" height="250"></canvas>

数据集末尾的垂直线

1 个答案: