Dojo折れ線グラフ上のカスタマイズされたマーカー/ツールチップ

Question

Dojo 1.8を使用して、時系列データをプロットするために使用している折れ線グラフを作成しています。データは、288（12×24）までのデータポイントを与える24の期間にわたって5分ごとに採取されたサンプルからなる。

グラフ上にツールチップを表示するには、グラフ上でマーカーを有効にする必要があります（dojoではこれが必要です）。問題は、デフォルトでは、データ・ポイントごとにマーカーが1つ作成され、結果としてマーカーが非常に多くなることです。理想的には、私は最新のデータポイントのための単一のマーカーと、おそらく1時間または2つのマーカーを表示します。

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

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で見つけたものと協力しました。

まず、Andyが説明しているようにMarkersOnlyプロットを作成してから、マーカーをカスタマイズできます。すべての作品は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(); 

私の同僚の1人がSVGパスをカスタマイズする方法を教えてくれました（独自のパターンを作成してください）。詳細についてはgo hereをご覧ください。