javascript - 将数据传递给堆积柱形图(Highcharts 框架)

Question

我在尝试使用 Highcharts 框架呈现堆积柱形图时遇到问题。

在客户端渲染时出现错误:

Uncaught TypeError: a.toPrecision is not a function

据我所知，这与堆叠有关。如果我将 stacking 设置为 null，它不会给出错误，但不会显示任何图表。

我正在将动态数据传递给系列。数据采用图例名称和每个 xAxis 类别的值数组的形式。

下面是作为数据传递的一个对象的示例。这存储在一个包含更多条目的数组中。

name:"READ_CALENDAR"
y: (24) [1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

这一定是错误的方法，因为我无法让它工作，那么正确的方法是什么？

我的问题是，我做错了什么？我应该如何传递动态数据以使其工作？我需要传递几个需要堆叠和匹配 xAxis 类别的唯一数据实例。

我将在下面添加有关我如何传递数据等的更多详细信息。如果您需要更多信息评论，我会尽力提供。

求助!提前致谢!!!

---

这是传递给客户端的数据示例:

[{"name":"READ_CALENDAR","timesUsed":[1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0]}, {"name":"READ_CONTACTS","timesUsed":[1,0,0,0,0,0,0,0,0,0,0,0,5,8,12,3,2,0,1,0,0,0,0,0]}, {"name":"READ_EXTERNAL_STORAGE","timesUsed":[1,0,0,0,0,0,0,0,0,10,0,1,9,17,13,39,8,1,0,0,0,0,0,2]}, {"name":"WRITE_EXTERNAL_STORAGE","timesUsed":[1,0,0,0,0,0,0,0,0,10,0,2,9,17,13,38,8,1,0,0,0,0,0,2]}, {"name":"WRITE_SMS","timesUsed":[1,0,0,0,0,0,0,0,0,0,0,0,5,7,12,2,2,1,0,0,0,0,0,0]}, {"name":"CAMERA","timesUsed":[0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,2,2,1,0,0,0,0,0,0]}, {"name":"FINE_LOCATION","timesUsed":[0,0,0,0,0,0,0,0,0,15,4,0,0,0,0,2,0,0,0,0,0,0,0,0]}, {"name":"GPS","timesUsed":[0,0,0,0,0,0,0,0,0,3,0,0,0,1,1,2,0,0,0,0,0,0,0,0]}, {"name":"MONITOR_HIGH_POWER_LOCATION","timesUsed":[0,0,0,0,0,0,0,0,0,4,0,0,0,1,1,2,0,0,0,0,0,0,0,0]}, {"name":"MONITOR_LOCATION","timesUsed":[0,0,0,0,0,0,0,0,0,3,0,0,0,1,1,2,0,0,0,0,0,0,0,0]}, {"name":"OP_READ_PHONE_STATE","timesUsed":[0,0,0,0,0,0,0,0,0,2,0,0,3,2,1,3,0,2,0,0,0,0,0,0]}, {"name":"POST_NOTIFICATION","timesUsed":[0,0,0,0,0,0,0,0,0,16,15,7,10,14,26,17,5,2,1,0,0,0,0,0]}, {"name":"TAKE_AUDIO_FOCUS","timesUsed":[0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,1,0,0,0,0,0,0,0,0]}, {"name":"TOAST_WINDOW","timesUsed":[0,0,0,0,0,0,0,0,0,14,15,7,10,9,13,12,3,1,0,0,0,0,0,0]}, {"name":"WAKE_LOCK","timesUsed":[0,0,0,0,0,0,0,0,0,6,0,0,1,3,2,17,7,2,0,0,0,0,0,1]}, {"name":"WIFI_SCAN","timesUsed":[0,0,0,0,0,0,0,0,0,2,0,0,0,0,2,0,0,0,0,0,0,0,0,0]}, {"name":"BOOT_COMPLETED","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,4,2,0,0,0,0,0,0,0,0,0,0]}, {"name":"GET_ACCOUNTS","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,4,4,0,3,0,0,0,0,0,0,0,0]}, {"name":"WIFI_CHANGE","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,4,2,0,0,0,0,0,0,0,0,0,0]}, {"name":"USE_FINGERPRINT","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0]}, {"name":"RECORD_AUDIO","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,0,0,0,0,0,0,0]}, {"name":"VIBRATE","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,0,0,0,0,0,0,0]}, {"name":"WRITE_CALENDAR","timesUsed":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0]}]

此数据随后将被解析为 JSON 对象:

var jsonObj =  JSON.parse(obj); (where obj is the data)

然后数据将被推送到一个数组:

var seriesData = [];

for (var i in jsonObj) {
    seriesData.push({
        name: jsonObj[i].name ,
        y: jsonObj[i].timesUsed
    });
}

然后 Hichcharts 脚本看起来像这样:

Highcharts.chart('permData', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Example graph'
        },
        xAxis: {
            categories: ['00-01','01-02','02-03','03-04','04-05','05-06','06-07','07-08','08-09','09-10','10-11','11-12','12-13','13-14','14-15','15-16','16-17','17-18','18-19','19-20','20-21','21-22','22-23','23-24']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Y axis text here'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: null /*(Highcarts.theme && Highcharts.theme.textColor) || 'gray'*/
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: null /*(Highcharts.theme && Highcharts.theme.background2) || 'white'*/,
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltop: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}:{point.y}<br/>',
        },
        plotOptions: {
            column: {
                stacking: 'percentage',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                }
            }
        },
        series: [{
            type: 'column',
            name: 'perm',
            data: seriesData
        }]
    });

Answer 1

您非常接近，您在构建 dataSeries 的循环中设置了 y 而不是 data。应该是这样的:

for (var i in jsonObj) {
  seriesData.push({
    name: jsonObj[i].name ,
    data: jsonObj[i].timesUsed //data instead of y
  });
}

更改后，它就可以正常工作了。 y 是 data 的成员，用于为每个点设置多个属性的情况。

工作示例: https://jsfiddle.net/ewolden/r5yd56eb/1/

series.data 上的 API: https://api.highcharts.com/highcharts/series.column.data