将数据传递到堆叠的列图(高图表框架)

Question

当我试图用高级图表框架呈现一个堆叠的列图表时，我遇到了一个问题。

在客户端上呈现时，我会得到一个错误：

Uncaught TypeError: a.toPrecision is not a function

据我所知，这与堆叠有关。如果我将叠加设置为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
    });
}

然后，Hich图表脚本如下所示：

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

您非常接近，在构建y的循环中设置了dataSeries而不是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/

API on series.data: https://api.highcharts.com/highcharts/series.column.data