Highstocks の範囲セレクターのデフォルト リストにさらに 2 つのボタンを追加しようとしています。これを範囲セレクターオプションとして使用しています：
rangeSelector: {
buttons: [{
type: 'day',
count: 1,
text: '1d'
}, {
type: 'day',
count: 5,
text: '5d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: null
},
デフォルトのボタンは正しく機能しますが、1d および 5d ボタンは機能しません。データについてhttp://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?は、サーバーからこれを送信し、同様のタイムスタンプ形式で 5 日間のデータを配列に追加しています。しかし、うまくいきません。グラフはすべてのデータを一度に表示しています。データに対して複数の行を描画することを意味し、範囲セレクターボタンでは「すべて」のみを選択でき、残りは無効になっています。
月次および年次のデータとともに日中のデータも表示できるように、グラフ エンジンに送信する必要があるデータ形式。Yahoo の財務チャートに似たインタラクティブなチャートを作成したいと考えていましたhttp://finance.yahoo.com/echarts?s=AC-A.TO+Interactive#symbol=AC-A.TO;range=1d。ただし、1d および 5d オプションを機能させることはできません。
誰もこれを行う方法を知っていますか?
また、x 軸に events.setExtreme オブジェクトを設定しようとしました。これは、jsFiddleの例からコピーしたコードです
xAxis: {
events: {
setExtremes: function(e) {
if (typeof(e.rangeSelectorButton) !== 'undefined') {
var c = e.rangeSelectorButton.count;
var t = e.rangeSelectorButton.type;
var txt = e.rangeSelectorButton.text;
var btn_index = null;
if (c == 1 && t == "month") {
btn_index = 0;
} else if (c == 3 && t == "month") {
btn_index = 1;
} else if (c == 6 && t == "month") {
btn_index = 2;
} else if (t == "ytd") {
btn_index = 3;
} else if (c == 0 && txt == "1d") {
btn_index = 4;
} else if (c == 0 && txt == "5d") {
btn_index = 5;
} else if (c == 1 && t == "year") {
btn_index = 6;
} else if (t == "all") {
btn_index = 7;
}
// Store btn_index in a cookie here and use it
// to initialise rangeSelector -> selected next
// time the chart is loaded
alert(btn_index);
}
}
}
},
上記のオプションを使用してボタンを機能させようとしました。しかし、問題は、上記のように、1d または 5d ボタンが無効になっているか、何らかの方法で選択された場合、他のボタンがクリックされても選択されたままになり、その場合は選択が解除されるはずです。
残念ながら、ライブ jsFiddle の例をセットアップできません。これは、データがローカルの PHP サーバーから取得されており、Highcharts.com サイトの例で使用されている JSONP サーバーにhttp://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?1 日または 5 日間のデータが含まれていないためです。
ここにjqueryコードがあります
function renderChart() {
$.ajax({
url: $('#chart-action-path').text(),
data: {
range: "5y",
name: $('#symbol-name').text()
},
type: "POST",
error: function(xhr, tStatus, e) {
if (!xhr) {
alert(" We have an error ");
alert(tStatus + " " + e.message);
} else {
alert("else: " + e.message); // the great unknown
}
},
success: function(data) {
console.log(data);
var options = {chart: {
renderTo: 'info'
},
xAxis: {
events: {
setExtremes: function(e) {
if (typeof(e.rangeSelectorButton) !== 'undefined') {
var c = e.rangeSelectorButton.count;
var t = e.rangeSelectorButton.type;
var txt = e.rangeSelectorButton.text;
var btn_index = null;
if (c == 1 && t == "month") {
btn_index = 0;
} else if (c == 3 && t == "month") {
btn_index = 1;
} else if (c == 6 && t == "month") {
btn_index = 2;
} else if (t == "ytd") {
btn_index = 3;
} else if (c == 0 && txt == "1d") {
btn_index = 4;
} else if (c == 0 && txt == "5d") {
btn_index = 5;
} else if (c == 1 && t == "year") {
btn_index = 6;
} else if (t == "all") {
btn_index = 7;
}
// Store btn_index in a cookie here and use it
// to initialise rangeSelector -> selected next
// time the chart is loaded
alert(btn_index);
console.log(e.rangeSelectorButton);
}
}
}
},
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 3,
text: '3m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: null
},
title: {
text: $('#symbol-name').text() + " Stock Price",
},
series: [{
name: $('#symbol-name').text() + "Stock Trends",
data: JSON.parse(data), // predefined JavaScript array
tooltip: {
valueDecimals: 2
}
}]
}
chart1 = new Highcharts.StockChart(options);
console.log(chart1.series);
}
})
}
私の問題が理にかなっていることを願っています。2 日以上経ちましたが、この問題に対する実行可能な解決策がまだ見つかりません。さらに情報を提供する必要がある場合はお知らせください。
事前にありがとう、Maxx