Question

尝试使用Highcharts框架渲染堆积柱形图时遇到问题。

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

Uncaught TypeError: a.toPrecision is not a function

据我所知，这与堆叠有关。如果我将堆叠设置为空，则不会出现错误，但不会显示图形。

我正在将动态数据传递给该系列。数据的形式为图例的名称和每个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

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

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

将数据传递到堆积柱形图（Highcharts Framework）

1 个答案: