Блог

У меня есть данные 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

Вам необходимо адаптировать свои JSON-данные к формату, требуемому Highcharts. Пример:

     series: [{
        data: data.map(el => ({
            name: el.nama,
            drilldown: el.drilldown,
            y: el.y
        }))
    }],
    xAxis: {
        type: 'category'
    }
  

Живая демонстрация: http: //jsfiddle.net/blackLabel/ncxe1h36/

Ссылка на API: https: //api.highcharts.com/highcharts/series.column.data

Я предположил, что вам понадобится гистограмма, и я ее создал. И я предположил, что следующие данные — это то, что вы хотите построить с помощью гистограммы. Я использовал 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 позволяет настраивать текст при наведении курсора мыши на панель.