highcharts - 如何在 highchart 上使用 highstocks 导航器

Question

我有一个 highcharts 日期时间样条图，我想从 highstocks(highstocks 已经在页面上)添加导航器，而无需更改有关图表的任何其他内容。

从 highchart 切换到 highstocks 也会改变很多我想放弃的默认行为(轴设置、图例设置......各种)。我只想要导航器。

所以我要么只将导航器添加到我的 highchart，要么指向一个完整的选项列表，我可以将这些选项传递给 highstocks 以使其与 highcharts 默认值(如果存在)相匹配。

谢谢!

Answer 1

通过用 highstock.js 替换 highcharts.js 你不会改变默认行为:

Highcharts :http://jsfiddle.net/pq7o66as/

Highstock:http://jsfiddle.net/pq7o66as/1/

现在只需启用导航器:

http://jsfiddle.net/pq7o66as/2/

    navigator: {
        enabled: true      
    },

注:

不要从以下位置更改构造函数: $('#container').highcharts(options);至 $('#container').highcharts('StockChart', options); .

Highstock 的默认选项:

    chart: {
        panning: true,
        pinchType: 'x',
        inverted: false // "true" is not supported in Highstock
    },
    navigator: {
        enabled: true
    },
    scrollbar: {
        enabled: true
    },
    rangeSelector: {
        enabled: true
    },
    title: {
        text: null,
        style: {
            fontSize: '16px'
        }
    },
    tooltip: {
        shared: true,
        crosshairs: true
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        line: {
            marker: {
                enabled: false,
                radius: 2
            },
            states: {
                hover: {
                    lineWidth: 2
                }
            }
        },
        column: {
            shadow: false,
            borderWidth: 0
        }
    },
    xAxis: {
            startOnTick: false, // only when navigator enabled 
            endOnTick: false, // only when navigator enabled
            minPadding: 0,
            maxPadding: 0,
            ordinal: true,
            title: {
                text: null
            },
            labels: {
                overflow: 'justify'
            },
            showLastLabel: true,
            type: 'datetime' // in Highstock only supported type
   },
   yAxis: {
        labels: {
            y: -2
        },
        opposite: opposite,
        showLastLabel: false,
        title: {
            text: null
        }
   }