当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - Why isn't my spline chart showing when using combo charts?

问题描述:

So I'm using Highcharts-ng with Angular to create a combination chart of a spline chart and a column chart formatted as a histogram to show trends.

The way it works is that the on the load of the page, I only see the histogram, and not the spline. Changing the order does nothing.

It looks as though if I have the spline chart data hard-coded it shows, but using the program to add in the data after a service is called in does not work.

(function() {

'use strict';

angular

.module('app.widgets')

.directive('trends', trends);

trends.$inject = ['ResultsService'];

/* @ngInject */

function trends() {

var ddo = {

restrict: 'EA',

templateUrl: 'app/widgets/trends/trends.directive.html',

link: link,

scope: {

data: '=',

config: '='

},

controller: controller,

controllerAs: 'vm',

bindToController: true

};

return ddo;

function link(scope, element, attrs) {

}

function controller($scope, ResultsService) {

var vm = this;

var parent = $scope.widgetController;

var size = {

height: angular.element('li.widget-border.ng-scope.gridster-item')[1].style.height - 20 ,

width: angular.element('li.widget-border.ng-scope.gridster-item')[1].style.width - 20

};

vm.histogram = {

chart: {

zoomType: 'xy'

},

title: {

text: 'Average Monthly Weather Data for Tokyo'

},

subtitle: {

text: 'Source: WorldClimate.com'

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

crosshair: true

},

yAxis: { // Primary yAxis

labels: {

style: {

color: Highcharts.getOptions().colors[2]

}

},

title: {

text: 'Events',

style: {

color: Highcharts.getOptions().colors[2]

}

}

},

tooltip: {

shared: true

},

legend: {

layout: 'vertical',

align: 'left',

x: 80,

verticalAlign: 'top',

y: 55,

floating: true,

backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'

},

series: [{

name: 'Average',

type: 'spline',

data: [],

marker: {

enabled: true

}

}],

loading: false,

useHighStocks: false,

size: {

height: size.height,

width: size.width

}

};

vm.processChartData = processChartData;

vm.data = {

charts: {

}

};

ResultsService.getData().then(function(res) {

vm.data = {

charts: {}

};

vm.data.charts = processChartData(res);

vm.histogram.xAxis.categories = [];

vm.histogram.series.push ({

name: 'Events per month',

type: 'column',

data: [],

marker: {

enabled: true

}

});

console.log(vm.histogram.series);

angular.forEach(vm.data.charts.months, function(v,k){

vm.histogram.xAxis.categories.push(k);

vm.histogram.series[1].data.push(v);

});

vm.histogram.options = {

plotOptions: {

}

};

vm.histogram.options.plotOptions = {

column: {

borderWidth: 0.5,

groupPadding: 0,

shadow: true

},

};

console.log(vm.data.charts.months);

vm.histogram.xAxis.categories.sort();

var average = calculateAverage();

vm.histogram.series[0].data=average;

console.log(vm.histogram.series);

});

function swap(pos1, pos2){

var temp = vm.histogram.series[pos1];

vm.histogram.series[pos1] = vm.histogram.series[pos2];

vm.histogram.series[pos2] = temp;

}

function calculateAverage() {

var averageArray = [];

var total = 0;

angular.forEach(vm.data.charts.months, function(v,k){

console.log(v);

total += v;

});

console.log((total/12.0).toFixed(2));

var average = (total/12.0).toFixed(2);

angular.forEach(vm.histogram.xAxis.categories, function(v,k){

averageArray.push(average);

});

return averageArray;

}

function processChartData(data) {

var output = {};

var months = {};

var dayOfWeek = {};

var epoch = {};

angular.forEach(data, function (value, index) {

// by month

if (!months[value.eventDate.month]) {

months[value.eventDate.month] = 1;

}

months[value.eventDate.month] += 1;

// by day of week

if (!dayOfWeek[value.eventDate.dayOfWeek]) {

dayOfWeek[value.eventDate.dayOfWeek] = 1;

}

dayOfWeek[value.eventDate.dayOfWeek] += 1;

// by day

if (!epoch[value.eventDate.epoch]) {

epoch[value.eventDate.epoch] = 1;

}

epoch[value.eventDate.epoch] += 1;

});

output.months = months;

output.dayOfWeek = dayOfWeek;

return output;

}

$scope.$on('gridster-item-resized', function(item){

var element = angular.element(item.targetScope.gridsterItem.$element[0]);

vm.histogram.size = {

height: element.height()-35,

width: element.width()

};

$scope.$broadcast('highchartsng.reflow');

});

}

}

})();

The chart on the webpage looks like this with the given code!

As you can see, it shows the legend with the spline, but the spline doesn't show up. I can't figure out why.

网友答案:

Your calculateAverage() function returns an array of strings since .toFixed(2) returns a string. Make sure it's an array of numbers. Convert average to a number with average = parseFloat(average) for example.

分享给朋友:
您可能感兴趣的文章:
随机阅读: