将数据传递到堆积柱形图（Highcharts 框架）答案

【问题标题】：Pass data to Stacked Column Chart (Highcharts Framework)将数据传递到堆积柱形图（Highcharts 框架）
【发布时间】：2017-11-02 13:20:25
【问题描述】：

我在尝试使用 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
        }]
    });

【问题讨论】：

这是您想要的图表：jsfiddle.net/ewolden/r5yd56eb 还是我搞砸了？如果是，我会用动态版本写一个答案。
是的，就是这样，你可以看到我对数据的格式是什么，然后解析为 JSON 对象！谢谢！

标签： javascript html json highcharts

【解决方案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

【讨论】：