【发布时间】：2017-09-19 00:00:42
【问题描述】：
我有一个 HighStock 图表，它在单击范围选择器按钮时从左向右移动。我现在要做的只是更改范围选择器按钮单击时的日期输入文本，而无需任何 setExtremes。我隐藏了输入框，因为我不希望用户手动输入日期。我希望“到”日期文本始终是图表的最大日期文本。这意味着我不想在单击任何按钮时更改“至”日期文本，而只在单击范围选择器按钮时更改“从”日期文本。
在以下代码中，图表“至”文本为（2017 年 9 月 15 日），当用户单击任何范围选择器按钮时，例如“5y”，我只想更改“From”文本而不是“To”文本。这意味着点击后的文字将是“From Sep 15, 2012”和“To Sep 15, 2017”。
我知道这是不对的，但我必须这样做，并且尝试了很多但没有得到任何结果。
感谢您的宝贵时间。
这里是a fiddle。
这是代码。
(function(H) {
H.wrap(H.RangeSelector.prototype, "clickButton", function(
proceed,
i,
redraw
) {
var rangeSelector = this,
chart = rangeSelector.chart,
rangeOptions = rangeSelector.buttonOptions[i],
baseAxis = chart.xAxis[0],
unionExtremes =
(chart.scroller && chart.scroller.getUnionExtremes()) || baseAxis || {},
dataMin = unionExtremes.dataMin,
dataMax = unionExtremes.dataMax,
newMin,
newMax =
baseAxis &&
Math.round(Math.min(baseAxis.max, H.pick(dataMax, baseAxis.max))), // #1568
type = rangeOptions.type,
baseXAxisOptions,
range = rangeOptions._range,
rangeMin,
minSetting,
rangeSetting,
ctx,
ytdExtremes,
dataGrouping = rangeOptions.dataGrouping;
if (dataMin === null || dataMax === null) {
// chart has no data, base series is removeddebugger;
return;
}
// Set the fixed range before range is altered
chart.fixedRange = range;
// Apply dataGrouping associated to button
if (dataGrouping) {
this.forcedDataGrouping = true;
Axis.prototype.setDataGrouping.call(
baseAxis || {
chart: this.chart
},
dataGrouping,
false
);
}
// Apply range
if (type === "month" || type === "year") {
if (!baseAxis) {
// This is set to the user options and picked up later when the axis is instantiated
// so that we know the min and max.
range = rangeOptions;
} else {
ctx = {
range: rangeOptions,
max: newMax,
dataMin: dataMin,
dataMax: dataMax
};
//newMin = baseAxis.minFromRange.call(ctx);
//if (H.isNumber(ctx.newMax)) {
// newMax = ctx.newMax;
//}
newMin = dataMin;
newMax = newMin + range;
}
// Fixed times like minutes, hours, days
} else if (range) {
//newMin = Math.max(newMax - range, dataMin);
//newMax = Math.min(newMin + range, dataMax);
newMin = dataMin;
newMax = newMin + range;
} else if (type === "ytd") {
// On user clicks on the buttons, or a delayed action running from the beforeRender
// event (below), the baseAxis is defined.
if (baseAxis) {
// When "ytd" is the pre-selected button for the initial view, its calculation
// is delayed and rerun in the beforeRender event (below). When the series
// are initialized, but before the chart is rendered, we have access to the xData
// array (#942).
if (dataMax === undefined) {
dataMin = Number.MAX_VALUE;
dataMax = Number.MIN_VALUE;
each(chart.series, function(series) {
var xData = series.xData; // reassign it to the last item
dataMin = Math.min(xData[0], dataMin);
dataMax = Math.max(xData[xData.length - 1], dataMax);
});
redraw = false;
}
ytdExtremes = rangeSelector.getYTDExtremes(dataMax, dataMin, H.useUTC);
newMin = rangeMin = ytdExtremes.min;
newMax = ytdExtremes.max;
// "ytd" is pre-selected. We don't yet have access to processed point and extremes data
// (things like pointStart and pointInterval are missing), so we delay the process (#942)
} else {
addEvent(chart, "beforeRender", function() {
rangeSelector.clickButton(i);
});
return;
}
} else if (type === "all" && baseAxis) {
newMin = dataMin;
newMax = dataMax;
}
rangeSelector.setSelected(i);
// Update the chart
if (!baseAxis) {
// Axis not yet instanciated. Temporarily set min and range
// options and remove them on chart load (#4317).
baseXAxisOptions = H.splat(chart.options.xAxis)[0];
rangeSetting = baseXAxisOptions.range;
baseXAxisOptions.range = range;
minSetting = baseXAxisOptions.min;
baseXAxisOptions.min = rangeMin;
H.addEvent(chart, "load", function resetMinAndRange() {
baseXAxisOptions.range = rangeSetting;
baseXAxisOptions.min = minSetting;
});
} else {
// Existing axis object. Set extremes after render time.
baseAxis.setExtremes(
newMin,
newMax,
H.pick(redraw, 1),
null, // auto animation
{
trigger: "rangeSelectorButton",
rangeSelectorButton: rangeOptions
}
);
}
});
})(Highcharts);
var seriesOptions = [],
seriesCounter = 0,
names = ["MSFT", "AAPL"];
/**
* Create the chart when all data is loaded
* @returns {undefined}
*/
function createChart() {
var end = new Date().getTime();
Highcharts.stockChart("container", {
rangeSelector: {
selected: 4,
buttons: [
{
type: "year",
count: 1,
text: "1y"
},
{
type: "year",
count: 3,
text: "3y"
},
{
type: "year",
count: 5,
text: "5y"
},
{
type: "all",
text: "All"
}
]
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? " + " : "") + this.value + "%";
}
},
plotLines: [
{
value: 0,
width: 2,
color: "silver"
}
]
},
xAxis: {},
plotOptions: {
series: {
compare: "percent",
showInNavigator: true
}
},
tooltip: {
pointFormat:
'<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
}
$.each(names, function(i, name) {
$.getJSON(
"https://www.highcharts.com/samples/data/jsonp.php?filename=" +
name.toLowerCase() +
"-c.json&callback=?",
function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
var minDate = $(
".highcharts-input-group .highcharts-range-input:eq(0)"
).text();
var maxDate = $(
".highcharts-input-group .highcharts-range-input:eq(1)"
).text();
}
);
});
【问题讨论】：
标签： javascript jquery highcharts highstock