chart.js

Question

我使用 chart.js v2 库绘制图表。我试图设置一条零线，但它不起作用。我需要像下面的屏幕截图一样画两条线。是否可以使用一些 cinfiguration 选项进行绘制？

var options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
          x: 20,
          y: 1
        },
        {
          x: 21,
          y: 1.1
        },
        {
          x: 23,
          y: 1.4
        },
      ],
    }]
  },
  options: {
    legend: false,
    scales: {
      yAxes: [{
        ticks: {
          min: 1,
          max: 2,
          display: false,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }],
      xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'transparent',
          display: true,
          zeroLineColor: 'red'
        },
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

这是一个 fiddle 代码： https://jsfiddle.net/c4wotrx1/4/

Answer 1

试试下面，您需要保留线条但将它们隐藏在图表区域中。

这可以通过 drawOnChartArea 来完成：false，看这个 documentation

gridLines: {
        drawBorder:true,
      drawOnChartArea: false,
      color: 'red',
      display: true,
      zeroLineColor: 'red'
    },

希望对您有所帮助。

Answer 2

您需要在 xAxes 和 yAxes 上启用 gridLines，但禁用 drawOnchartArea:

xAxes: [{
        ticks: {
          min: 1,
          max: 99,
        },
        gridLines: {
          color: 'red',
          display: true,
          drawBorder: true,
          drawOnChartArea: false
        },
      }],
      yAxes: [{
        gridLines: {
           color: 'red',
            display: true,
            drawBorder: true,
            drawOnChartArea: false
        }
     }]

chart.js - 如何在左侧和底部绘制 x 和 y 轴线

chart.js - How draw x and y axes lines on the left and bottom

chart.js2