在Dojo折线图上定制标记/工具提示

Question

我正在使用 Dojo 1.8 创建一条线图，用于绘制时间序列数据。该数据由每5分钟取样的样本组成，跨越24小时，最多可获得288（12x24）个数据点。

为了在图表上显示工具提示，我需要在图表上启用标记（Dojo 要求这样做）。问题是，默认情况下，Dojo 会为每个数据点创建一个标记，这会导致标记太多。理想情况下，我希望仅显示最新数据点的一个标记，可能每隔一两个小时再显示一个标记。

可以自定义标记的外观，但到目前为止，我还没有找到任何方法来自定义标记出现的频率。如有建议，请不吝赐教。

- PhilDin

Answer 1

尝试使用MarkersOnly模块：

require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines", "dojox/charting/plot2d/MarkersOnly", "dojox/charting/Series", "dojo/ready"],
function(Chart, Default, Lines, MarkersOnly, Series, ready) {
  ready(function(){
    var chart = new Chart("simplechart");
        chart.addPlot("plot_lines", { type: Lines });
        chart.addPlot("plot_markers", { type: MarkersOnly });
        chart.addAxis("x");
        chart.addAxis("y", {vertical:true});
        chart.addSeries("series_lines", [4, 2, 6, 4, 5, 8, 8, 1, 7, 9]);
        // if you want your markers at data points 6 and 7;
        chart.addSeries("series_markers", [{x:3,y:6}, {x:9,y:7}], { plot: "plot_markers" , stroke: { color: "blue" } });
        chart.render();
  });
});

- Andy W

---

谢谢，我想我已经解决了。最初，我不想添加另一个系列，因为我已经有一个图例，而且我不想标记系列出现在那里。我通过绘制实际数据，然后创建图例，最后添加标记系列来解决这个问题。这意味着标记系列不会出现在图例中，因为它不会自动更新。 - PhilDin

Answer 2

我曾经在文档上遇到了很大的困难，但最终还是解决了。这里有一个 jsFiddle，里面有一个可用的示例。我使用了 Andy W 的解决方案，并结合 DojoToolkit.org 上找到的内容来自定义标记。

首先，按照 Andy 的说明创建一个 MarkersOnly 绘图，然后您可以自定义标记。您可以在这份文档中找到所有的组件。

//found on http://dojotoolkit.org/reference-guide/1.8/dojox/charting.html
//CIRCLE:           "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0",
//SQUARE:           "m-3,-3 l0,6 6,0 0,-6 z",
//DIAMOND:          "m0,-3 l3,3 -3,3 -3,-3 z",
//CROSS:            "m0,-3 l0,6 m-3,-3 l6,0",
//X:                "m-3,-3 l6,6 m0,-6 l-6,6",
//TRIANGLE:         "m-3,3 l3,-6 3,6 z",
//TRIANGLE_INVERTED:"m-3,-3 l3,6 3,-6 z"

var customTheme = new SimpleTheme({
     markers: {
                    DIAMOND: "m0,-3 l3,3 -3,3 -3,-3 z",
                    CROSS:   "m0,-3 l0,6 m-3,-3 l6,0"
                }
            });

var chart = new Chart("chartCustomMarkers",
     {
          title: "Custom Markers Chart",
          titlePos: "top",
          titleFont: "normal normal normal 15pt Arial",
     });
chart.addPlot("default", { type: MarkersOnly })
     .addAxis("x")
     .addAxis("y", { vertical: true })
     .addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7])
     .addSeries("Series 2", [2, 5, 4, 8, 5, 6, 6, 1])
     .setTheme(customTheme)
     .render();

我的一位同事向我展示了如何自定义SVG路径（创建自己的图案）。只需点击此处获取更多信息。

- JabberwockyDecompiler