在一张图表中最多可包含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
});