Chart.js如何制作像这样的水平线？

Question

我已经尝试了一些已经存在的答案，但是还没有碰到运气。如何获得这些水平行（它们是海峡）的位置只要不物质，因为它是可改变的。

这是我的代码

<div class="row">
    <div class="col-12 border">
        <canvas id="myChart"></canvas>
    </div>
</div>

<script src="./assets/charts/dist/Chart.js"></script>
<!----------------------myChart---------------------->
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Palle1", "Palle2", "Palle3", "Palle4", "Palle5", "Palle6"], // Palle
        datasets: [{
            fill:false,
            label: 'Højde', // Hvad der bliver målt
            data: [12, 19, 13, 15, 12, 13], // målet Variabler til
            lineTension:(0),
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99 ,132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 4
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMax:30, // max på Y
                    //suggestedMin:10 // min på Y
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

感谢您的帮助。

Answer 1

我自己找到了解决方案。在这里

<div class="row">
    <div class="col-12 border">
        <canvas id="myChart"></canvas>
    </div>
</div>

<script src="./assets/charts/dist/Chart.js"></script>
<!----------------------myChart---------------------->
<script>
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");

var horizonalLinePlugin = {
  afterDraw: function(chartInstance) {
    var yScale = chartInstance.scales["y-axis-0"];
    var canvas = chartInstance.chart;
    var ctx = canvas.ctx;
    var index;
    var line;
    var style;

    if (chartInstance.options.horizontalLine) {
      for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
        line = chartInstance.options.horizontalLine[index];

        if (!line.style) {
          style = "rgba(169,169,169, .6)";
        } else {
          style = line.style;
        }

        if (line.y) {
          yValue = yScale.getPixelForValue(line.y);
        } else {
          yValue = 0;
        }

        ctx.lineWidth = 3;

        if (yValue) {
          ctx.beginPath();
          ctx.moveTo(0, yValue);
          ctx.lineTo(canvas.width, yValue);
          ctx.strokeStyle = style;
          ctx.stroke();
        }

        if (line.text) {
          ctx.fillStyle = style;
          ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
        }
      }
      return;
    };
  }
};
Chart.pluginService.register(horizonalLinePlugin);

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    fill: false,
    lineTension: 0.1,
    backgroundColor: "rgba(75,192,192,0.4)",
    borderColor: "rgba(75,192,192,1)",
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    pointBorderColor: "rgba(75,192,192,1)",
    pointBackgroundColor: "#fff",
    pointBorderWidth: 1,
    pointHoverRadius: 5,
    pointHoverBackgroundColor: "rgba(75,192,192,1)",
    pointHoverBorderColor: "rgba(220,220,220,1)",
    pointHoverBorderWidth: 2,
    pointRadius: 4,
    pointHitRadius: 10,
    data: [65, 59, 80, 81, 56, 55, 48],
  }]
};

var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    "horizontalLine": [{
      "y": 82,
      "style": "rgba(255, 0, 0, .4)",
      "text": "max"
    }, {
      "y": 50,
      "style": "#00ffff",
      "text": "min"
    }]
  }
});
</script>