HighCharts - highstock倒转轴与滚动导航

HighCharts - HightStock inverted axes with scroll navigator

本文关键字:滚动 导航 highstock HighCharts      更新时间:2023-09-26

我正在尝试使用Highcharts工具来显示一些具有大量数据和系列比较的图形。

我需要的图王正是这个例子中给出的。

除了mine必须垂直显示(y轴为时间线,从上到下,x轴为值)

就像"样条倒转"的例子(见这里)所示,显示海拔相关的数据是非常有用的。

我可以很容易地想象反转值和交换轴图例,但我不认为时间线导航器会遵循…

我还尝试将图形设置为倒置的,就像在"样条与倒轴"的例子:

chart = new Highcharts.StockChart({
           chart: {
               renderTo: 'container',
               inverted: true
           },
...

但它没有工作。

是否有一种方法可以显示与y轴上的时间线导航器垂直相同的图形?

编辑:似乎不可能在HighStock图形上使用反转(如文档所示),所以我调整了我的问题:我们可以使用HighCharts倒排图来显示HighStock图表中的许多点吗?(即使我们在y轴上没有任何滚动导航器)

Hilitock不支持倒排图表,参见:http://api.highcharts.com/hilitock#chart

编辑:可以使用倒置的Highcharts与datagrougroup,它当然需要Hilitock在文件中,但只需使用Highcharts. chart()创建图表。不要忘记从Hilitock启用dataGrouping。示例:http://jsfiddle.net/PATyv/2/

代码:

 window.chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            inverted: true
        },
        title: {
            text: 'USD to EUR exchange rate'
        },
        tooltip: {
            style: {
                width: '200px'
            },
            valueDecimals: 4
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },
        xAxis: {
            type: 'datetime'
        },
        series: [{
            name: 'USD to EUR',
            data: data,
            id: 'dataseries',
            dataGrouping: {
                enabled: true
            }
        }]
    });