highcharts系列有时以相反的顺序绘制

时间:2016-08-16 19:59:16

标签: javascript angularjs highcharts

在一张图表中最多可包含6个系列。前3个系列是列,后3个是带标记的线。 无论我做什么,折线图都是相反的。他们总是以特定的顺序绘制,无论我是否.reverse()他们的数据系列。 附件是我正在使用的代码。为什么列可以正常,但行反转?我事先使用angular.copy()为所有数组隔离它。 我们的想法是每天都有目标的实际值,并有一个标记显示每个人每天的平均值。后者使用宽度为0的折线图和可见标记。然后我将每天的x值偏移,以使它们与柱形图对齐。

这真的很奇怪。各种系列数据的长度相同。

以下是代码:

    var allSeries       = [];
    var allColors       = [];
    var aSeries         = null;

    if( $scope.drawAlerts( ) )
    {
        aSeries = {};
        aSeries.type = 'column';
        aSeries.name = "Alerts";
        aSeries.data = alertSeries;
        allSeries.push( angular.copy( aSeries ) );
        allColors.push( '#ED561B' );
    }

    if( $scope.drawSubs( ) )
    {
        aSeries = {};
        aSeries.type = 'column';
        aSeries.name = "Subs";
        aSeries.data = subSeries;
        allSeries.push( angular.copy( aSeries ) );
        allColors.push( '#FFC200' );
    }

    if( $scope.drawOpps( ) )
    {
        aSeries = {};
        aSeries.type = 'column';
        aSeries.name = "Opps";
        aSeries.data = OppSeries;
        allSeries.push( angular.copy( aSeries ) );
        allColors.push( 'dodgerblue' );
    }

    if( $scope.drawAlerts( ) && $scope.drawAverage( ) )
    {
        aSeries = {};
        aSeries.type = 'line';
        aSeries.name = "Avg Alerts";
        aSeries.lineWidth = 0;
        aSeries.marker = { lineColor: 'black', lineWidth:1, fillColor: '#ED561B' };
        aSeries.data = alertAvgSeries;
        allSeries.push( angular.copy( aSeries ) );
        allColors.push( '#ED561B' );
    }

    if( $scope.drawSubAlerts( ) && $scope.drawAverage( ) )
    {
        aSeries = {};
        aSeries.type = 'line';
        aSeries.name = "Avg Subs";
        aSeries.lineWidth = 0;
        aSeries.marker = { lineColor: 'black', lineWidth:1, fillColor: '#FFC200' };
        aSeries.data = subAvgSeries;
        allSeries.push( angular.copy( aSeries ) );
        allColors.push( '#FFC200' );
    }

    if( $scope.drawOpps( ) && $scope.drawAverage( ) )
    {
        aSeries = {};
        aSeries.type = 'line';
        aSeries.name = "Avg Opps";
        aSeries.lineWidth = 0;
        aSeries.marker = { lineColor: 'black', lineWidth:1, fillColor: 'dodgerblue', radius:3 };
        aSeries.data = oppsAvgSeries;
        allSeries.push( angular.copy( aSeries ) );
        allColors.push( 'dodgerblue' );
    }

    Highcharts.setOptions({ colors: allColors });

    $( '#chart-1-' + aTargetID ).highcharts({
        credits: {
            enabled:false
        },
        title: {
            text: chartTitle,
            style: {
                "font-family":'HNBold'
            }
        },
        tooltip:{
            formatter: function()
            {
                return this.series.name + ' for this date is <b>' + Highcharts.numberFormat( this.y, 2 ) + '</b>';
            }
        },
        xAxis: {
            categories: targetDates
        },
        yAxis: {
            tickInterval:2,
            allowDecimals:false,
            title: {
                text: 'Per Day'
            }
        },
        series: allSeries
    });

0 个答案:

没有答案