Question

我正在使用Dojo 1.8创建一个折线图，我用它来绘制时间序列数据。数据包括24个周期内每5分钟采集的样本，最多可提供288（12x24）个数据点。

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

可以自定义标记的外观，但到目前为止，我还没有找到任何方法来自定义标记出现的频率。任何建议都会非常受欢迎。

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();
  });
});

Answer 2

我真的很难用文档来解决问题。 Here is a jsFiddle有一个实例。我使用了Andy W的解决方案并使用我在DojoToolkit.org上找到的用于自定义标记的方法。

首先，你需要创建一个MarkersOnly图，Andy解释说，然后你可以自定义标记。你可以找到所有作品on this documentation。

//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路径（创建自己的模式）。只需go here了解更多信息。

Dojo折线图上的自定义标记/工具提示

2 个答案: