在折线图上绘制矩形答案

【问题标题】：Drawing rectangles on a line graph在折线图上绘制矩形
【发布时间】：2016-05-27 10:36:53
【问题描述】：

我有一个简单的折线图。

我想让用户在图表顶部绘制与网格线对齐的矩形。请参阅此处以获取视觉示例：

我已经查看了 Highcharts 和 d3，但它们都没有允许用户在图表上“绘制”的工具。

在深入研究 API 和/或用大量代码重新发明轮子之前，我希望有人之前已经实现了这一点（或类似的东西），或者可以为我指明正确的方向？

【问题讨论】：

您需要一个折线图：bl.ocks.org/mbostock/3883245，绘制一些矩形：dashingd3js.com/svg-basic-shapes-and-d3js，然后使用这些矩形将它们附加到您将线/路径附加到的容器中。确保将点传递给图形比例，然后就可以了。折线图上的矩形。
我相信在 d3 中这样做会很好。您可以创建一个透明的<rect> 对象网格，并为每个对象提供一个更改其填充颜色的mousedown 事件。

标签： javascript canvas d3.js charts highcharts

【解决方案1】：

根据我使用 Highcharts 的经验，您绝对可以在图表上进行绘制。这只是你想怎么做的问题。

我可以想到两种方法来实现这个目标：

在图表上绘制几个“虚拟”线系列，以创建您正在寻找的效果。这样做的好处是线条将与图表网格保持固定，在调整浏览器窗口或视口大小时将与图表的其余部分保持响应，并且将以各种格式干净地导出。您可以使用一些参数将“虚拟”系列排除在图例之外 (showInLegend: false)，并防止用户与其交互 (enableMouseTracking: false)。
使用renderer.rect 方法在图表中绘制矩形（请参阅http://api.highcharts.com/highcharts#Renderer.rect）。这是从 Highcharts 的 API 文档中获取的一个基本示例：http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/renderer-rect-on-chart/

API 文档充满了示例。我希望这对您的探索有所帮助。

【讨论】：

您的帖子对我的任务很有帮助，谢谢。最终，它让我发现了 Highcharts 的 Annotations 插件，我根据自己的喜好对其进行了分叉和修改。

【解决方案2】：

您可以将 columnRange 系列与 line 结合使用。

plotOptions: {
  columnrange: {
            pointPadding: 0,
    groupPadding: 0,
    borderWidth: 1,
    borderColor: 'black'
  }
},

legend: {
  enabled: false
},

series: [{
  type: 'line',
  data: [
    [12, -20],
    [2, -10]
  ]
}, {
    color: 'rgba(0,0,0,0)',
  name: 'Temperatures',
  data: [
    [-9.7, 9.4],
    [-8.7, 6.5],
    [-3.5, 9.4],
    [-1.4, 19.9],
    [0.0, 22.6],
    [2.9, 29.5],
    [9.2, 30.7],
    [7.3, 26.5],
    [4.4, 18.0],
    [-3.1, 11.4],
    [-5.2, 10.4],
    [-13.5, 9.8]
  ]
}]

例子：

http://jsfiddle.net/8vu224mc/

【讨论】：

啊，矩形的列范围也是一个好主意！谢谢你，@SebastianBochan。