Highcharts：如何将每列显示为单独的系列？

Question

I'm trying to display the data from my json.

My json file looks like this:

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)

And here's my code:

<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>

The column is not showing and the 4 data which is: 1801 1802 1803 and 1804 only appears in 1 series. I want to make them each series with different data which is OGS number.

Answer 1

enter image description here Your data is not in right format. If you need to plot STRM is x axis , you will need to put them in a separate array and assign it to xAxis.

The yAxis also accepts an array of objects and the object need to have two keys like name & data where data is an array .

Also OGS values are in string , so adding a + before jsonData[i].OGS will convert it to number.

 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> 

Answer 2

To make it as you expect (each column is a separate series) you can follow this approach:

1. Prepare series and xAxis.categories arrays. Each series.data array should have an appropriate amount of null points before the one with real value. Something like that:

---

categories:

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

series:

[{
  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]
}]

2. plotOptions.column.grouping should be disabled:

---

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

Demo:

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

API reference:

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

Answer 3

can you guys check my code for drilldown? it only display 1 data series right after i clicked the column on the first chart,.

 $.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
                }]
                })
            }
        });