Javascript 避免在图表JS上第一条虚线

在的帮助下，我成功地向数据集添加了偏移量，但我想从图表中删除第一条虚线

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

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方法，而不是使用这种黑客技术。有人知道怎么做吗

这是目前的代码：

---

边框的破折号效果没有内置功能。您可以使用

gridLines

属性中的属性

zeroLineColor

和

zeroLineWidth

定义其自身的颜色或宽度，但破折号效果（尚未）没有

但这里有一个使用Chart.js插件的小解决方法：在绘制完所有内容后，您可以绘制自己的边框，看起来它并没有虚线

afterDatasetsDraw:函数（图表）{
//我们得到了所需的所有变量（画布上下文和比例）
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=图表.scales[yAxe.id]；
//你可以在这里定义颜色
ctx.strokeStyle=“rgb（120120120）”；
ctx.beginPath（）；
//这条线是从左下角画的。。
ctx.moveTo（xScale.left+0.5，yScale.bottom）；
//…左上角（“+0.5”或多或少是一个固定值，但不是必需的）
ctx.lineTo（xScale.left+0.5，yScale.top）；
ctx.stroke（）；
}

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

---

边框的破折号效果没有内置功能。您可以使用

gridLines

属性中的属性

zeroLineColor

和

zeroLineWidth

定义其自身的颜色或宽度，但破折号效果（尚未）没有

但这里有一个使用Chart.js插件的小解决方法：在绘制完所有内容后，您可以绘制自己的边框，看起来它并没有虚线

afterDatasetsDraw:函数（图表）{
//我们得到了所需的所有变量（画布上下文和比例）
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=图表.scales[yAxe.id]；
//你可以在这里定义颜色
ctx.strokeStyle=“rgb（120120120）”；
ctx.beginPath（）；
//这条线是从左下角画的。。
ctx.moveTo（xScale.left+0.5，yScale.bottom）；
//…左上角（“+0.5”或多或少是一个固定值，但不是必需的）
ctx.lineTo（xScale.left+0.5，yScale.top）；
ctx.stroke（）；
}

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

---

使其在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)';
  },
}

---

让它在反应中工作。这可能会有帮助

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

---

Uffff！我不知道该怎么感谢你才好！一开始它看起来像一个简单的图表，但需要大量定制：（@zkropotkine没问题：）--chart.js是高度可定制的，但您需要事先知道一些事情（例如插件）。这个答案一切都好吗？还是你需要更多的细节？那就足够了，越来越多：）Uffff！我不知道该怎么感谢你才好！一开始它看起来像一个简单的图表，但需要大量定制：（@zkropotkine没问题：）--chart.js是高度可定制的，但您需要事先知道一些事情（例如插件）。这个答案一切都好吗？还是你需要更多的细节？这已经足够多了：）