5

我正在使用 Dojo 1.8 创建一个折线图，用于绘制时间序列数据。数据由在 24 个周期内每 5 分钟采集一次的样本组成，最多提供 288 个 (12x24) 数据点。

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

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

4

2 回答 2

5

尝试使用 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();
  });
});
于 2012-11-26T20:11:13.190 回答
0

我真的很难处理文档，我只是想通了。 这是一个带有工作示例的 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 路径（创建自己的模式）。只是去这里了解更多信息。

于 2014-03-10T18:30:18.040 回答