javascript - 避免在 Chart JS 上第一个 GridLine 被虚线化

Question

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

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

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;
});

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

这是目前的代码:

https://jsfiddle.net/5notumds/

Answer 1

没有内置边框的破折号效果。您可以使用 gridLines 属性中的 zeroLineColor 和 zeroLineWidth 属性定义其自己的颜色或宽度，但对于破折号效果还没有任何定义.

但这里有一个使用 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这是它的结果: