5

Dojo 1.8 を使用して、時系列データをプロットするために使用している折れ線グラフを作成しています。データは、24 期間にわたって 5 分ごとに取得されたサンプルで構成され、最大 288 (12x24) のデータ ポイントが得られます。

チャートにツールチップを表示するには、チャートでマーカーを有効にする必要があります (Dojo ではこれが必要です)。問題は、デフォルトで Dojo が各データ・ポイントに対して 1 つのマーカーを作成するため、マーカーが多すぎることです。理想的には、最新のデータ ポイントに対して 1 つのマーカーを表示し、できれば 1 時間または 2 時間ごとにマーカーを表示します。

マーカーの外観をカスタマイズすることは可能ですが、これまでのところ、マーカーが表示される頻度をカスタマイズする方法を見つけることができませんでした. どんな提案でも大歓迎です。

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

同僚の 1 人が、SVG パスをカスタマイズする方法 (独自のパターンを作成する方法) を教えてくれました。詳細については、ここにアクセスしてください。

于 2014-03-10T18:30:18.040 に答える