Question

我在Dygraph中使用drawPointCallback函数绘制自定义形状。效果很好，现在我希望用户能够选择这样的自定义绘制形状。它们是受污染区域的矩形区域，因此如果用户可以点击这样的区域并且它会点亮，那将是很好的。

Dygraphs有没有办法做到这一点？目前我只能在左上角点击一个点（这是实际点）。虽然这有效，但它不是很直观。

Answer 1

highlightCircleSize选项控制点击必须与点触发pointClickCallback的距离。这也可以控制鼠标悬停在图表上时高光圈的大小，但是，由于您实现了自己的drawPointCallback和drawHighlightPointCallback，因此可以覆盖此行为。

g = new Dygraph(div, data, {
                  highlightCircleSize: 10,  // <-- 10px radius click target
                  pointClickCallback: function(e, pt) {
                    alert(JSON.stringify(pt));
                  },
                  drawPoints: true,
                  // Set these to draw whatever custom shape you like:
                  drawPointCallback: Dygraph.Circles.HEXAGON,
                  drawHighlightPointCallback: Dygraph.Circles.HEXAGON
                });

这是一个片段：

g = new Dygraph(document.getElementById("graph"),
                 // For possible data formats, see http://dygraphs.com/data.html
                 // The x-values could also be dates, e.g. "2012/03/15"
                 "X,Y,Z\n" +
                 "1,0,3\n" +
                 "2,2,6\n" +
                 "3,4,8\n" +
                 "4,6,9\n" +
                 "5,8,9\n" +
                 "6,10,8\n" +
                 "7,12,6\n" +
                 "8,14,3\n",
                 {
                     // options go here. See http://dygraphs.com/options.html
                     legend: 'always',
                     animatedZooms: true,
                     title: 'dygraphs chart template',
                     highlightCircleSize: 10,
                     pointClickCallback: function(e, pt) {
                         alert(JSON.stringify(pt));
                     },
                     drawPoints: true,
                     drawPointCallback: Dygraph.Circles.HEXAGON,
                     drawHighlightPointCallback: Dygraph.Circles.HEXAGON
                 });

/*
Relevant CSS classes include:

Labels on the X & Y axes:
.dygraph-axis-label
.dygraph-axis-label-x
.dygraph-axis-label-y
.dygraph-axis-label-y2

Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html
.dygraph-title
.dygraph-xlabel
.dygraph-ylabel
.dygraph-y2label

The legend, see http://dygraphs.com/tests/series-highlight.html
.dygraph-legend
*/
.dygraph-title {
    color: gray;
}

<script src="http://dygraphs.com/dygraph-dev.js"></script>
<div id="graph"></div>

点击点以触发警报。

在dygraphs中选择绘制点

1 个答案: