简单条形图不显示图

debugcn 发表于 Dev

用户名

我打算使用显示条形图HighCharts.js。但是系列属性中的数据未显示。见下图：

请参阅下面的代码：

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    
    });
}

数据变量包含以下值：

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

汉娜

这是因为您的数字用引号引起来，使它们成为字符串，而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/

另外，如果您无法控制数据的格式，则始终可以使用以下函数将数组首先转换为int：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。