Highcharts: Как отобразить каждый столбец в виде отдельной серии?

Question

Я пытаюсь отобразить данные из моего json.

Мой файл json выглядит следующим образом:

0: {OGS: "26", STRM: "1811", ACAD_CAREER: null, YEAR: "2018"}1: {OGS: "4144", STRM: "1801", ACAD_CAREER: null, YEAR: "2018"}2: {OGS: "3935", STRM: "1802", ACAD_CAREER: null, YEAR: "2018"}3: {OGS: "16", STRM: "1812", ACAD_CAREER: null, YEAR: "2018"}length: 4__proto__: Array(0)

А вот мой код:

<script>
$(function () {

var categData = [];
var statusACountData = [];
var statusBCountData = [];
var dateVal=[];
var statusVal=[];
var countVal = [];

    var jsonvar = [];
    $.getJSON('http://localhost:37590/get_OGSDataPerTermYear/ORT/2018', function (jsonData) {


               for(i=0;i<jsonData.length;i++){
               dateVal[i]=jsonData[i].STRM;
              // statusVal[i]=jsonData[i].status;
               countVal[i]=jsonData[i].OGS;                   
            }

    //    jsonData
             console.log(jsonData);
             console.log(countVal);
             console.log(categData);


  //  $(function () {
        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },

            xAxis: {
                categories: dateVal,
                crosshair: true
            },
            series: [{
                name: dateVal,
                data: countVal
            }]
        });

      //  });
         });
});
</script>

Столбец не отображается, а 4 данные: 1801, 1802, 1803 и 1804 отображаются только в 1 серии.Я хочу сделать их каждой серии с различными данными, которые являются номером OGS.

Answer 1

Чтобы сделать это так, как вы ожидаете (каждый столбец - это отдельная серия), вы можете использовать следующий подход:

1. Подготовьте массивы series и xAxis.categories.Каждый массив series.data должен иметь соответствующее количество нулевых точек, прежде чем массив с реальным значением.Примерно так:

---

категории:

["1811", "1801", "1802", "1812"]

серия:

[{
  name: "cat - 0",
  data: [2456]
}, {
  name: "cat - 1",
  data: [null, 4144]
}, {
  name: "cat - 2",
  data: [null, null, 3935]
}, {
  name: "cat - 3",
  data: [null, null, null, 2316]
}]

plotOptions.column.grouping должно быть отключено:

---

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    crosshair: true,
    categories: categories
  },
  plotOptions: {
    column: {
      grouping: false
    }
  },
  series: series
});

Демо:

• https://jsfiddle.net/BlackLabel/ynqjftLk/

Ссылка API:

• https://api.highcharts.com/highcharts/plotOptions.column.grouping

Answer 2

вы, ребята, можете проверить мой код для детализации?он показывает только 1 ряд данных сразу после того, как я щелкнул столбец на первом графике.

 $.getJSON('http://localhost:37590/get_OGSDataPerTermYear/' + strCampus + "/" + 
 data[i].YEAR, function (jsonDataDrill) {

            const datadrill = jsonDataDrill
            console.log(jsonDataDrill);

            for (d = 0; d < datadrill.length; d++) {
                categories = datadrill[d].STRM

            dataseries.push({
                id: datadrill[d].YEAR,
                name: +datadrill[d].STRM,
                data: [{
                    y: +datadrill[d].OGS
                }]
                })
            }
        });

Answer 3

введите описание изображения здесь Ваши данные не в правильном формате.Если вам нужно построить STRM по оси x, вам нужно поместить их в отдельный массив и назначить его для xAxis.

yAxis также принимает массив объектов, и объект должен иметь два ключа, например name & data, где data - это массив.

Также значения OGSв строке, поэтому добавление + до jsonData[i].OGS преобразует его в число.

let jsonData = [{
  OGS: "2456",
  STRM: "1811",
  ACAD_CAREER: null,
  YEAR: "2018"
}, {
  OGS: "4144",
  STRM: "1801",
  ACAD_CAREER: null,
  YEAR: "2018"
}, {
  OGS: "3935",
  STRM: "1802",
  ACAD_CAREER: null,
  YEAR: "2018"
}, {
  OGS: "2316",
  STRM: "1812",
  ACAD_CAREER: null,
  YEAR: "2018"
}]

var categData = [];
var statusACountData = [];
var statusBCountData = [];
var dateVal = [];
var statusVal = [];
var countVal = [];
var jsonvar = [];



for (let i = 0; i < jsonData.length; i++) {
  dateVal[i] = jsonData[i].STRM;
  countVal.push({
    name: 'someText',
    data: [+jsonData[i].OGS]
  })
}





Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Some Text'
  },
  subtitle: {
    text: 'someTExt'
  },
  xAxis: {
    categories: dateVal,
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'OGS'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: countVal
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>