highcharts:错误的第三个Y轴

时间:2013-02-24 13:13:10

标签: javascript highcharts

我试图以单独的比例绘制3 Y轴。

问题在于,气压“文本”在图的“相对”侧(应该在哪里),而不是“数字”比例。

这是小提琴:link

代码:

$(function () {
$(document).ready(function() {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline',
            margin: [50,150,90,60],
            width: 700,
            height: 300
        },
        title: {
            text: 'Weather Today'
        },
        credits: {
            enabled: false
        },
        subtitle: {
            text: 'Åsen, Norway'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%H:%M'
            },
            tickInterval: 3600 * 1000,
            labels: {
                rotation: -45,
                align: 'right',
                style: {
                    fontSize: '10px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: [{
            title: {
                text: 'Temperature C'
            }
            }, {
            title: {
                text: '%'
            },
            opposite: true
            }, {
            title: {
                text: null
            }
            }, {
            title: {
                text: null
            }
            }, {
            title: {
                text: 'hPa'
            },
            opposite: true
        }],
        tooltip: {
            formatter: function() {
                    if(this.series.name === 'Temperature')
                    {
                        return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
                    }
                    if(this.series.name === 'Humidity')
                    {
                        return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' %';
                    }
                    if(this.series.name === 'Dewpoint')
                    {
                        return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
                    }
                    if(this.series.name === 'Wind chill')
                    {
                        return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
                    }
                    if(this.series.name === 'Air pressure')
                    {
                        return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' hPa';
                    }
            }
        }, 
        plotOptions: {
            spline: {
                lineWidth: 3,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            symbol: 'circle',
                            radius: 3,
                            lineWidth: 1
                        }
                    }
                }
            },
            line: {
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            symbol: 'circle',
                            radius: 4,
                            lineWidth: 1
                        }
                    }
                }
            }
        }, 
        series: [{
                name: 'Temperature',
                data: temp,
                type: 'spline',
                shadow: true,
                showInLegend: true, 
                pointInterval: 60 * 1000, 
                dashStyle: 'solid'
                } , {
                name: 'Humidity',
                data: hum,
                yAxis: 1,
                shadow: false,
                showInLegend: true,
                pointInterval: 60 * 1000,
                type: 'line',
                dashStyle: 'shortdot'
                }, {
                name: 'Dewpoint',
                data: dew,
                shadow: false,
                showInLegend: true,
                pointInterval: 60 * 1000,
                type: 'line',
                dashStyle: 'shortdot'
                }, {
                name: 'Wind chill',
                data: windchill,
                shadow: false,
                showInLegend: true,
                pointInterval: 60 * 1000,
                type: 'line',
                dashStyle: 'shortdot'
                }, {
                name: 'Air pressure',
                data: baro,
                yAxis: 2,
                shadow: false,
                showInLegend: true,
                pointInterval: 60 * 1000,
                type: 'spline',
                dashStyle: 'shortdot'
        }],
        navigation: {
            menuItemStyle: {
                fontSize: '6px'
            }
        } 
    });
});

});

1 个答案:

答案 0 :(得分:0)

yAxis:4气压系列固定它。
还将linkedTo:0添加到连接到温度的其他系列。