平均して 10 ～ 15 のトレンドを表示する HighStock チャート (以下) があります。1 つのディスプレイで非常に多くのトレンドを実行すると、ツールチップが遅くなり、大きすぎることがわかりました。ツールチップを無効にしたいのですが、十字線でホバーした各トレンドの値は表示したままです。ツールチップに表示される値を本質的にカスタムのものに移動するには、HighStock でどのイベントを購読すればよいですか?
ツールチップが表示され、左側にカスタムの凡例が表示されたグラフの画像を添付しました。ツールチップと同じように、左側の凡例項目の横に (十字線で) ホバーした値を表示し、ツールヒントを無効にしますが、十字線は保持したいと思います。
PlotOptions.Series.Point.Events.MouseOver を使用してこれを行う方法をいくつか見つけましたが、それは 1 つのトレンドに対してのみ機能します。すべてのトレンドに対してそれを行うにはどうすればよいですか?
私のコードがうまく機能することは注目に値します。上のグラフの画像は、MVC4 で動的に生成された作業グラフの画像で、PC/MAC/iPhone/iPad で美しく表示されます。私の質問には、最終的に HighStock に精通した誰かが答える必要があります。彼らは、必要なデータを Javascript 関数にプッシュするために、どのイベントを購読する必要があるか、またはどのような変更を加える必要があるかを知るために必要な詳細な知識を持っているからです。十字線の値をカスタム凡例にプッシュします)。「私のコードは正しいですか？」という質問ではありません。「目的の効果を得るためにどのコードを使用するか」という問題です。
ただし、関連する場合に備えて、コードを次に示します。C# のジェネリックな "var" を作成し、"Javascript()" で返すことに注意してください。
// BUILD HIGHCHARTS JAVASCRIPT
var data = @"$(function () {
$.post(""";
if (Request.ApplicationPath.ToString() == "/")
{
data += @"/HighCharts/GetData"", function (data) {";
}
else
{
data += Request.ApplicationPath.ToString() + @"/HighCharts/GetData"", function (data) {";
}
data += @"// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
events : {
load : LoadComplete
},
renderTo: 'container',
zoomType: 'x'
}, ";
data += @"colors: [ ";
foreach (var a in model.listOfSensors)
{
data += "'" + a.ColorHex.ToString() + "'";
y = y + 1;
if (y != model.listOfSensors.Count)
{
data += ",";
}
}
data += @"], ";
data += @"plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
SeriesMouseOver(this.series.name)
},
mouseOut: function () {
SeriesMouseOut(this.series.name)
}
}
}
}
},";
data += @"navigator : {
adaptToUpdatedData: false
}, ";
data += @"exporting : {
enabled: true
}, ";
data += @"rangeSelector : {
buttons: [{
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
inputStyle: {
color: '#CCCCCC',
fontFamily: 'Arial'
},
labelStyle: {
color: '#000000',
fontFamily: 'Arial',
fontWeight: 'bold'
},
selected : 3 // all
},
xAxis : {
events : {
afterSetExtremes : afterSetExtremes
},
minRange: 3600 * 1000 // one hour
},
yAxis: [";
// BUILD SCALES
foreach (IECRM_Data_Project.Entities.Scale a in model.scales)
{
data += "{ ";
data += "min: " + a.Min.ToString() + ",";
data += "showEmpty: " + a.ShowIfEmpty.ToString().ToLower() + ",";
data += "max: " + a.Max.ToString() + ",";
data += "lineColor: '" + a.ColorHex.ToString() + "',";
data += "labels: { enabled: false }" ;
data += "}";
x = x + 1;
if (x != model.scales.Count) //ADD A COMMA AFTER EACH EXCEPT THE LAST
{
data += ",";
}
}
data += @"],
tooltip: {
pointFormat: '<span id=""{series.name}.replace(/\./g, """")"" style=""color:{series.color}"">{series.name}: {point.y}</span><br />',
useHTML: true,
valueDecimals: 1
},
series: data
});
});
});";
return JavaScript(data);