高级图表中的范围选择器

Question

我正在使用Highchart绘制数据图表。我在这个图表中看到了日期范围选择器，但我使用的是面积图，但范围选择器不在这个图表内。以下是我的代码。

jQuery('#weenat_statr_chart').highcharts({
                title: {
                    text: chart_title
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: null
                    }
                },
                tooltip: {
                    crosshairs: true,
                    shared: true,
                    valueSuffix: unit_value
                },
                legend: {
                },
,
                rangeSelector: {
                    buttonTheme: { // styles for the buttons
                        fill: 'none',
                        stroke: 'none',
                        'stroke-width': 0,
                        r: 8,
                        style: {
                            color: '#039',
                            fontWeight: 'bold'
                        },
                        states: {
                            hover: {
                            },
                            select: {
                                fill: '#039',
                                style: {
                                    color: 'white'
                                }
                            }
                        }
                    },
                    labelStyle: {
                        color: 'silver',
                        fontWeight: 'bold'
                    },
                    selected: 1
                },              
                series: [{
                    name: unit_name,
                    data: averages,
                    zIndex: 1,
                    marker: {
                        fillColor: 'white',
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[0]
                    }
                }, {
                    name: '<?php echo __("Range","test-plugin"); ?>',
                    data: ranges,
                    type: 'arearange',
                    lineWidth: 0,
                    linkedTo: ':previous',
                    color: Highcharts.getOptions().colors[0],
                    fillOpacity: 0.3,
                    zIndex: 0
                }]
            }); 

js fiddle url

请帮助我如何使用面积图的日期范围。谢谢

Answer 1

这是因为rangeSelector仅适用于HighStock，而不适用于高点。因此，您需要将脚本更改为：

<script src="http://code.highcharts.com/stock/highstock.js"></script>

并将StockChart字添加到创建图表的函数中：

$('#container').highcharts('StockChart', { ... } );

这是更新后的fidd