如何在jqplot中显示点状网格线而不是实线

Question

$(document).ready(function(){
  // Our data renderer function, returns an array of the form:
  // [[[x1, sin(x1)], [x2, sin(x2)], ...]]
  var sineRenderer = function() {
    var data = [[]];
    for (var i=0; i<13; i+=0.5) {
      data[0].push([i, Math.sin(i)]);
    }
    return data;
  };

  // we have an empty data array here, but use the "dataRenderer"
  // option to tell the plot to get data from our renderer.
  var plot1 = $.jqplot('chart1',[],{
      title: 'Sine Data Renderer',
      dataRenderer: sineRenderer
  });
});

在这张图表中，我需要设置虚线网格线作为背景。在jqplot中是否可以绘制虚线网格线？

- Tarika

Answer 1

我不知道是否有更简单的方法来完成这个任务，但是下面的方法可以实现：

打开 jquery.jqplot.js 文件，在函数 $.jqplot.CanvasGridRenderer.prototype.draw 中添加一行代码 ctx.setLineDash([1, 5]);，放在 ctx.save(); 的后面。然后将文件最小化，保存为 jquery.jqplot.min.js（或直接在最小化版本上应用这些更改），就可以了。

请注意，所有的图表都会有虚线。如果这是一个问题，那么您需要在 Grid 类中添加一个新的属性，比如 lineDash，并在 $.jqplot.CanvasGridRenderer.prototype.draw 中相应地处理它。

图片如下：

- frost

---

谢谢，它起作用了。但是如果我想要去掉垂直线，你能给我建议吗？- Tarika 6分钟前 - Tarika

@Tarika已经在这里回答了：https://dev59.com/5mkw5IYBdhLWcg3wHW3n - frost