避免第一个GridLine在Chart JS上破折

Question

在Tektiv的帮助下，我设法为数据集添加了偏移量，但我想从图表中删除第一个虚线gridLine。

我使用以下代码直接修改了库：

var drawGridDashedLine = false;

// Draw all of the tick labels, tick marks, and grid lines at the correct places
helpers.each(itemsToDraw, function(itemToDraw) {
  ...
  ...
  if (context.setLineDash && drawGridDashedLine) {
                            context.setLineDash(itemToDraw.glBorderDash);
    context.lineDashOffset = itemToDraw.glBorderDashOffset;
  }
  ...
  ...

  drawGridDashedLine = true;
});

但我希望使用公共API方法来实现它，而不是使用这种hacky技术。有谁知道怎么做？

这是目前的代码：

https://jsfiddle.net/5notumds/

Answer 1

边框的破折号效果没有内置功能。您可以使用zeroLineColor属性中的属性zeroLineWidth和gridLines定义自己的颜色或宽度，但短划线效果尚无（尚未）。

但是这里有一个使用Chart.js插件的小解决方法：你可以在绘制完所有内容后绘制自己的边框，看起来它不会破灭。

afterDatasetsDraw: function(chart) {

    // We get all the variables we need (canvas context and scales)
    var ctx = chart.chart.ctx;
    var xAxe = chart.config.options.scales.xAxes[0];
    var xScale = chart.scales[xAxe.id];
    var yAxe = chart.config.options.scales.yAxes[0];
    var yScale = chart.scales[yAxe.id];

    // You can define the color here
    ctx.strokeStyle = "rgb(120, 120, 120)";

    ctx.beginPath();
    // The line is drawn from the bottom left ..
    ctx.moveTo(xScale.left + 0.5, yScale.bottom);
    // .. to the top left ('+ 0.5' is more or less a fix but it is not essential)
    ctx.lineTo(xScale.left + 0.5, yScale.top);
    ctx.stroke();
}

您可以看到您的示例已更新on this jsFiddle，结果如下：

Answer 2

让它在 React 中工作。这可能会有所帮助。

 grid: {
  borderDash: [5, 5],
  borderDashOffset: 2,
  color: function (context) {
    if (context.tick.value === 0) {
      return 'rgba(0, 0, 0, 0)';
    }
    return 'rgba(0, 0, 0, 0.1)';
  },
}