我正在尝试将另外两个按钮添加到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