如何在 highchart 上使用 highstocks 导航器

Question

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

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

所以我想将 just 导航器添加到我的 highchart，或者指向一个完整的选项列表，我可以将其传递给 highstocks 以使其与highcharts 默认值（如果存在）。

谢谢！

Answer 1

将 highcharts.js 替换为 highstock.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
        }
   }

如何在 highchart 上使用 highstocks 导航器

How to use highstocks navigator on a highchart

highcharts

highstock