相同数据双系列中的Highstock奇怪的y轴刻度差异

时间:2014-04-28 13:46:16

标签: highcharts highstock

我设置这个小提琴来说明我的问题:http://jsfiddle.net/3nDvK/5/

基本上具有相同数据的双系列... y轴刻度和绘图是不同的。

如果series1上的数据与series2上的数据相同......我不知道为什么两个系列在图形上都不同。帮助!

小提琴的代码就是这个

Highcharts.setOptions({
lang: {
    contextButtonTitle: 'Menu do gráfico',
    months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho',  'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
    weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
    shortMonths: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    downloadPNG: 'Download em imagem PNG',
    downloadJPEG: 'Download em imagem JPG',
    downloadPDF: 'Download em documento PDF',
    downloadSVG: 'Download em imagem vector SVG',
    exportButtonTitle: 'Exportar o gráfico',
    loading: 'Carregamento em curso...',
    printChart: 'Imprimir o gráfico'
}
});


$(function() {
data = [[1398604500000,17.3,17.3],[1398605400000,17.9,17.9],[1398606300000,17.8,17.8],[1398607200000,18,18],[1398608100000,17.9,17.9],[1398609000000,18,18],[1398609900000,17.6,17.6],[1398610800000,17.3,17.3],[1398611700000,17.5,17.5],[1398612600000,17.7,17.7],[1398613500000,17.5,17.5],[1398614400000,17.7,17.7],[1398615300000,18,18],[1398616200000,18,18],[1398617100000,17.6,17.6],[1398618000000,17.1,17.1],[1398618900000,17.2,17.2],[1398619800000,16.9,16.9],[1398620700000,16.4,16.4],[1398621600000,16.2,16.2],[1398622500000,16.5,16.5],[1398623400000,15.9,15.9],[1398624300000,14.7,14.7],[1398625200000,13.9,13.9],[1398626100000,13.4,13.4],[1398627000000,13,13],[1398627900000,12.9,12.9],[1398628800000,12.6,12.6],[1398629700000,12.4,12.4],[1398630600000,12.3,12.3],[1398631500000,11.9,11.9],[1398632400000,11.6,11.6],[1398633300000,11,11],[1398634200000,10.4,10.4],[1398635100000,10,10],[1398636000000,10.1,10.1],[1398636900000,9.9,9.9],[1398637800000,9.3,9.3],[1398638700000,8.9,8.9],[1398639600000,8.5,8.5],[1398640500000,8.3,8.3],[1398641400000,7.8,7.8],[1398642300000,7.4,7.4],[1398643200000,7.6,7.6],[1398644100000,7.2,7.2],[1398645000000,6.9,6.9],[1398645900000,7.1,7.1],[1398646800000,6.9,6.9],[1398647700000,6.8,6.8],[1398648600000,6.3,6.3],[1398649500000,6.3,6.3],[1398650400000,6.3,6.3],[1398651300000,6.9,6.9],[1398652200000,6.8,6.8],[1398653100000,6.8,6.8],[1398654000000,7,7],[1398654900000,7.2,7.2],[1398655800000,7.3,7.3],[1398656700000,7.6,7.6],[1398657600000,7.9,7.9],[1398658500000,8.1,8.1],[1398659400000,8.2,8.2],[1398660300000,8.2,8.2],[1398661200000,8.5,8.5],[1398662100000,8.6,8.6],[1398663000000,8.8,8.8],[1398663900000,9.2,9.2],[1398664800000,9.3,9.3],[1398665700000,9.6,9.6],[1398666600000,10,10],[1398667500000,10.2,10.2],[1398668400000,10.9,10.9],[1398669300000,10.9,10.9],[1398670200000,10.8,10.8],[1398671100000,11.3,11.3],[1398672000000,12.2,12.2],[1398672900000,12.7,12.7],[1398673800000,14.1,14.1],[1398674700000,13.6,13.6],[1398675600000,13.6,13.6],[1398676500000,13,13],[1398677400000,13.9,13.9],[1398678300000,14.9,14.9],[1398679200000,14.8,14.8],[1398680100000,15,15],[1398681000000,15.3,15.3],[1398681900000,15.2,15.2],[1398682800000,15.6,15.6],[1398683700000,16.7,16.7],[1398684600000,16.5,16.5],[1398685500000,16.3,16.3],[1398686400000,16.2,16.2],[1398687300000,16.6,16.6],[1398688200000,17.5,17.5],[1398689100000,17.7,17.7]];


    val1 = [];
    val2 = [];

    $.each(data, function (key, value) {
        val1.push([value[0], value[1]]);
        val2.push([value[0], value[2]]);
    });

    $('#container2111').highcharts('StockChart', {

        chart: {
            zoomType: 'xy'
        },

        rangeSelector : {
            selected : 0,
            inputEnabled: $('#container').width() > 480,

            buttons: [{
                type: 'week',
                count: 1,
                text: '1s'
            }, {
                type: 'week',
                count: 2,
                text: '2s'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'month',
                count: 2,
                text: '2m'
            }, {
                type: 'all',
                text: 'Tudo'
            }]
        },

        title : {
            text : ''
        },
        subtitle : {
            text : '2014-04-27 14:37:01 TO 2014-04-28 14:37:01',
        },
        credits : {
            enabled: false
        },
        navigator : {
            adaptToUpdatedData: true,
            maskFill: 'rgba(243, 156, 18, 0.35)',
            series: {
                type: 'areaspline',
                color: 'rgba(255, 255, 255, 0.00)',
                fillOpacity: 0.35,
                dataGrouping: {
                    smoothed: false
                },
                lineWidth: 1,
                lineColor: '#F39C12',

                marker: {
                    enabled: false
                },
                shadow: true
            }   
        },          
        xAxis : {
            dateTimeLabelFormats : {
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e %b',
                week: '%e %b',
                month: '%b \'%y'
            }
        },

        yAxis: [{ 
            labels: {
                format: '{value} ºC',
                style: {
                    color: '#F39C12'
                }
            },
            title: {
                text: 'Teste1',
                style: {
                    color: '#F39C12'
                }
            },
            opposite: false
        }, {
            labels: {
                format: '{value} ºC',
                style: {
                    color: '#009900'
                }

            },
            title: {
                text: 'Teste2',
                style: {
                    color: '#009900'
                }
            },
            opposite:true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            enabled: true,
            layout: 'vertical',
            align: 'left',
            x: 130,
            verticalAlign: 'top',
            y: 115,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'

        },
        series : [{
            name : 'Teste1',
            data : val1,
            color: '#F39C12',
            yAxis: 1,
                            tooltip: {
                valueDecimals: 2,
                valueSuffix: ' ºC',
                xDateFormat: '%A, %e/%b, %H:%M:%S'
            }
        },
        {
            name : 'Teste2',
            data : val2,
            color: '#009900',
            type: 'column',             tooltip: {
                valueDecimals: 2,
                valueSuffix: ' ºC',
                xDateFormat: '%A, %e/%b, %H:%M:%S'
            }
        }]

    });
});

1 个答案:

答案 0 :(得分:1)

该系列是不同类型的。 Series 1类型的column,并针对yaxis: 0绘制。从0开始,柱形图更有意义。Series 0是一种线型,从0开始并不具有视觉上的重要性。