Question

我正在使用Highchart绘制我的数据图表。我在此图表中看到date range选择器，但我使用的是Area Graph但是范围选择器不在此处。以下是我的代码

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

高图表图中的范围选择器

1 个答案: