单击 yAxis 更改 highstock 图表区域

Question

这是我的工作示例，效果很好，但我尝试在单击图表时更改区域的颜色：

<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>

如何在单击时更改区域级别（当我单击图表时，我在 yAxis（价格）值上画线，然后我想将区域级别更改为该值）？我该怎么做？

Answer 1

您需要在适当的系列上调用 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
      });
    }
  }

示例：http://jsfiddle.net/5uaoyrwd/

单击 yAxis 更改 highstock 图表区域

Change highstock chart zones on click yAxis

javascript

highcharts

highstock