0
私は、範囲選択ボタンクリックで左から右へ移動するHighStockチャートを持っています。私が今やりたいことは、setExtremesを持たない範囲セレクタボタンのクリックに対して日付入力テキストを変更することです。入力ボックスを隠しているのは、ユーザーが手動で日付を入力しないようにするためです。私は "To"日付のテキストを常にグラフの最大日付のテキストにしたい。私が変更したくないという意味は、任意のボタンの "To"日付テキストをクリックし、範囲選択ボタンの "From"日付テキストを変更するだけです。HIghStock Chartの「入力日」テキストのみをsetExtreremsなしで変更しますか？
次のコードでは、グラフの[To]テキストは（2010年9月15日）で、ユーザーが範囲セレクタボタンのいずれかをクリックすると表示されます。 "5y"、私は "From"テキストだけを "To"テキストではなく "From"テキストに変更したい。クリック後のテキストは「2012年9月15日以降」および「2017年9月15日まで」となります。
私はこれが正しいものではないことを知っていますが、私はそれをしなければならず、どこにも行かずにたくさん試しました。
お時間をいただきありがとうございます。
ここは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();
}
);
});