我正在尝试在 Highstocks 的默认范围选择器列表中添加两个按钮。我将其用作范围选择器选项：
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 天数据的数组。但它不起作用。图表一次显示所有数据。我的意思是它为数据绘制多条线，并且在范围选择器按钮中只能选择“全部”，而其余的都被禁用。
应该将什么数据格式发送到图表引擎，以便它还可以呈现日内数据以及月度和年度数据。我想建立一个类似于雅虎金融图表的交互式图表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=?没有日内或 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