这是我的工作示例，效果很好，但我尝试在单击图表时更改区域的颜色:
<script type="text/javascript">
function minutesFromMidnight() {
var midnight = new Date();
midnight.setHours( 24 );
midnight.setMinutes( 0 );
midnight.setSeconds( 0 );
midnight.setMilliseconds( 0 );
return Math.floor(1440 -(( midnight.getTime() - new Date().getTime() ) / 1000 / 60));
}
$.getJSON('http://waluty.breakermind.com/symbols/getsymbolsm1chart.php?s=GBPJPY&callback=?', function (data) {
// Plot line id name
var PlotLineId="PlotLine";
// create the chart
var chart = new Highcharts.stockChart('container', {
chart: {
spacing: 20,
height: 600,
backgroundColor: '#2e2e40',
style: {
fontFamily: 'Roboto, sans-serif'
},
resetZoomButton: {
theme: {
display: 'none'
}
},
events: {
click: function(evt) {
var yValue = evt.yAxis[0].value;
var yAxis = evt.yAxis[0].axis;
$.each(yAxis.plotLinesAndBands,function(){
if(this.id===PlotLineId)
{
this.destroy();
}
});
yAxis.addPlotLine({
value: yValue,
width: 2,
color: '#99ff00',
color: '#ff3D00',
dashStyle: 'solid',
id: PlotLineId
});
zones: [{
value: 0,
color: '#ff3300'
}, {
value: yValue,
color: '#ff3300'
}, {
color: '#3c3'
}]
}
}
},
// buttons navigation png
drilldown: {
activeAxisLabelStyle: {
color: '#202033'
},
activeDataLabelStyle: {
color: '#202033'
}
},
// Scroll chart navogator
navigator: {
enabled: true,
height: 50,
margin: 20,
maskFill: "rgba(102,133,194,0.2)",
maskInside: true,
outlineColor: "#3c3",
outlineWidth: 1,
handles: {
backgroundColor: "#3c3",
borderColor: "#202033"
}
},
// scroll bar bottom
navigation: {
buttonOptions: {
symbolStroke: '#3C3',
theme: {
fill: '#202033'
}
}
},
scrollbar: {
barBackgroundColor: '#3c3',
barBorderRadius: 5,
barBorderWidth: 0,
buttonBackgroundColor: '#ff3d00',
buttonBorderWidth: 0,
buttonBorderRadius: 5,
trackBackgroundColor: 'none',
trackBorderWidth: 8,
trackBorderRadius: 5,
trackBorderColor: '#202033'
},
rangeSelector : {
selected : 1
},
// disabled in css
rangeSelector : {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 1,
text: '1m'
}, {
type: 'minute',
count: 5,
text: '5m'
}, {
type: 'minute',
count: 15,
text: '15m'
}, {
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 4,
text: '4h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'week',
count: 1,
text: '1W'
}, {
type: 'month',
count: 1,
text: '1MN'
}, {
type: 'year',
count: 1,
text: '1Y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled:false,
buttonTheme: {
fill: '#202033',
stroke: '#3c3',
style: {
color: '#707073'
},
states: {
hover: {
fill: '#339933',
stroke: '#000',
style: {
color: 'white'
}
},
select: {
fill: '#ff3d00',
stroke: '#fff',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: '#505053',
inputStyle: {
backgroundColor: '#202033',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
title: {
text: 'Wykres <?php echo $s; ?>'
},
xAxis: [{
//alternateGridColor: '#FDFFD5',
plotLines: [{ // mark the weekend
color: '#ff3d00',
width: 2,
value: Date.UTC(2017, 2, 3),
dashStyle: 'longdashdot'
}],
tickInterval: 24 * 3600 * 1000,
// one day x label intervals (poziona skala)
type: 'datetime',
labels: {
style: {
color: '#3a3a4s',
fontSize: '1em'
}
},
}],
yAxis: [{
title: {
text: 'Exchange rate'
},
plotLines: [{
value: 0,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}, {
value: 0,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter maximum'
}
}],
//alternateGridColor: '#eee',
gridLineColor: "#202033",
gridLineDashStyle: "longdash",
gridLineWidth: 1,
labels: {
style: {
color: '#eee',
fontSize: '1em'
}
},
}],
series: [{
id: "main",
type: 'spline',
name: '<?php echo $s; ?>',
color: '#33CC33',
negativeColor: '#FF3D00',
data: data,
tooltip: {
color: '#fdcc66',
negativeColor: '#202033',
valueDecimals: 4,
valueSuffix: ' USD',
pointFormat: '<span style="color:{series.color}">Profit / Loss {series.name}</span>: <b>{point.y:.3f}</b><br/>'
},
tooltip: {
color: '#fdcc66',
color: '#ff6600',
negativeColor: '#FFC4C4',
valueDecimals: 4,
valueSuffix: ' USD',
pointFormat: '<span style="color:{series.color}"> {series.data[0]} Profit / Loss {series.name}</span>: <b>{point.y}</b><br/>'
},
dataGrouping: {
units: [[
'millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
], [
'second',
[1, 2, 5, 10, 15, 30]
], [
'minute',
[1, 2, 5, 10, 15, 30]
], [
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
},
zones: [{
value: 0,
color: '#ff3300', dashStyle: 'solid'
}, {
value: 140,
color: '#ff3300'
}, {
color: '#3c3',
dashStyle: 'solid'
}]
}]
});
console.log(chart.series[0]);
// alert(chart.series[0].data[5].y);
console.log(chart.series[0].xData.indexOf(Date.UTC(2017, 2, 3)));
var id = chart.series[0].xData.indexOf(Date.UTC(2017, 2, 3));
var price = chart.series[0].yData[id];
console.log(price);
//console.log(chart.get("container").data[5].y);
//alert(chart.series[0].data[data.length-1].y);
});
function getYPrice(series){
// get yPrice with date
var id = series.xData.indexOf(Date.UTC(2017, 2, 3));
return series.yData[id];
}
</script>
如何在点击时更改区域级别(当我单击图表时，我在 y 轴(价格)值上画线，然后我想将区域级别更改为该值)？ 我怎样才能做到这一点？
最佳答案
您需要调用update()方法在适当的系列上 - 并为该系列设置新区域。
events: {
click: function(evt) {
var yValue = evt.yAxis[0].value;
var yAxis = evt.yAxis[0].axis;
$.each(yAxis.plotLinesAndBands, function() {
if (this.id === PlotLineId) {
this.destroy();
}
});
yAxis.addPlotLine({
value: yValue,
width: 2,
color: '#99ff00',
color: '#ff3D00',
dashStyle: 'solid',
id: PlotLineId
}, false);
var zones = [{
value: 0,
color: '#ff3300'
}, {
value: yValue,
color: '#ff3300'
}, {
color: '#3c3'
}]
this.series[0].update({
zones: zones
});
}
}
关于javascript - 单击 y 轴更改高库存图表区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42607073/