简单条形图不显示图形

时间:2016-10-03 03:30:29

标签: javascript highcharts highstock

我计划使用HighCharts.js显示条形图。但系列属性中的数据未显示。见下图:

enter image description here

请参阅下面的代码:

exec_dashboard_load_graph(
    'exec_dashboard_collection_disbursement_graph',
    response,
    ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']                    
);  

function exec_dashboard_load_graph(id,data, x){
    var myChart = Highcharts.chart(id, {
        chart: {type: 'column'},
        title: {text: 'Annual Collection and Disbursement Summary'},
        subtitle:{text: 'City Goverment of Butuan'},
        xAxis: {categories: x,crosshair: true},
        yAxis: {min: 0,title: {text: 'Amount (Peso Value)'}},
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b> {point.y:.1f} Php </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},
        series: data    
    });
}

数据变量包含以下值:

enter image description here

我想知道我的数据有什么问题。请帮忙。这是我的jsfiddle

1 个答案:

答案 0 :(得分:1)

这是因为你的数字是引号,使它们成为字符串,而Highcharts不知道如何将数据呈现为字符串。

将它们更改为这样的数字将解决它:

var collections = new Array(11242282.20,7966734.89,5936262.58,7903113.53,6527188.99,20639705.75,14359971.15,6861212.08,0,0,0,0);
var disbursements = new Array(117015425.13,151452477.46,182264161.40,218257774.81,188822327.59,209183652.51,15081727.17,204713881.30,0,0,0,0);

https://jsfiddle.net/nnfbcuzr/1/

此外,如果您无法控制数据的格式化方式,您可以先使用以下函数将数组转换为整数:

function parsValuesToInts(arr) {
  var newArr = [];
  for(var i = 0; i < arr.length; i++){
    newArr.push(parseInt(arr[i],10));
  }
  return newArr;
}