如何使用具有功能的 Highcharts 获得工作范围选择器？答案

【问题标题】：How to get work range selector with Highcharts with a function?如何使用具有功能的 Highcharts 获得工作范围选择器？
【发布时间】：2017-08-03 13:34:09
【问题描述】：

我没有看到范围选择器，但我已经在代码中编写了它。我已经使用变量初始化了图表，例如：

var chart = Highcharts.chart('chartContainer', {
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Érték'
        },
        plotLines: [{
            value: 0,
            width: 20,
            color: '#FFFFFF'
        }]
    },
    //animation: Highcharts.svg,
    boost: {
        seGPUTranslations: true
    },
    rangeSelector: {
        buttonTheme: { // styles for the buttons
            fill: 'none',
            stroke: 'none',
            'stroke-width': 0,
            r: 8,
            style: {
                color: '#039',
                fontWeight: 'bold'
            },
            allButtonsEnabled: true,
            states: {
                hover: {},
                select: {
                    fill: '#039',
                    style: {
                        color: 'white'
                    }
                }
                // disabled: { ... }
            }
        }
    },
    title: {
        text: 'Prociszenzor'
    },
    series: []
});

如您所见，它不包含任何系列，我确实从另一个代码中添加了它：

chart.addSeries({
    type: 'line',
    name: dataaa.ertekek[i].neve + " " + dataaa.ertekek[i].mertek,
    data: [{
        y: dataaa.ertekek[i].ertek / 100,
        x: time
    }]
});

Dataaa 来自 JSON 文件。我确实将此数组推送到主图表数组，并使用 addPoint 函数向其添加点。我想做一个范围选择器，但我不知道该怎么做。

【问题讨论】：

标签： javascript json highcharts

【解决方案1】：

因为你没有发布任何你期望我假设的例子。

我根据您的代码制作了以下jsfiddle。请注意，我对您发布的内容做了以下更改。

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>

我知道您是否使用 highstock 库，但如果您想要一个范围选择器，您应该这样做。见highcharts.com/docs/chart-concepts/range-selector

var chart = Highcharts.stockChart('container', {

我将chart 更改为stockChart。

【讨论】：

嗯。我忘记在代码中写入 enabled: true 了。