高图表中的范围选择器

Question

我正在使用 Highchart 绘制我的图表 data.I 已经看到 date range selector in this chart but I am using Area Graph 但是范围选择器没有出现 this.Following 是我的代码。

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 而不是 highcharts。因此，您需要将脚本更改为：

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

并在创建图表的函数中添加 StockChart 词：

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

这是更新后的 fiddle

高图表中的范围选择器

Range Selector in Are Graph of High Chart

jquery

date-range

highcharts