时间戳

首页 > 解决方案 > 将 Value Json Data 获取到系列名称 Highchart

javascript - 将 Value Json Data 获取到系列名称 Highchart

问题描述

我有数据 Json ：

0: {nama: "Democrats", drilldown: "Democrats-2010", y: 17}
    drilldown: "Democrats-2010"
    nama: "Democrats"
    y: 17

1: {nama: "Other", drilldown: "Other-2010", y: 14}
   drilldown: "Other-2010"
   nama: "Other"
   y: 14

2: {nama: "Republican", drilldown: "Republican-2010", y: 11}
   drilldown: "Republican-2010"
   nama: "Republican"
   y: 11

如何将值“ nama ”应用于 highchart 数据系列

标签： javascriptjsonhighcharts

解决方案

我以为你会想要条形图，我已经做了一个。我假设以下数据是您想要使用条形图构建的数据。我使用 jQuery 将您的 jsonData 存储在数组中，这样您就可以一步一步地看到。

编辑：这里是 jsFiddle， https ://jsfiddle.net/kopigod/vn4abw92/1/

var namaArray = [],
    yArray = [];

var jsonData = [
    {nama: "Democrats", drilldown: "Democrats-2010", y: 17},
    {nama: "Other", drilldown: "Other-2010", y: 14},
    {nama: "Republican", drilldown: "Republican-2010", y: 11}
];

$.each(jsonData, function(index, value){
  namaArray.push(value.nama);
  yArray.push(value.y);
});


Highcharts.chart('YourChartIdInHTML', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Your main title'
    },
    xAxis: {
        categories: namaArray
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Y-axis Title'
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
     name: "Test",
     data: yArray
    }]
});

当然，当您将鼠标悬停在栏上时，HighChart 允许您自定义文本。

推荐阅读