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

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

enter image description here您的数据格式不正确。如果需要绘制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>

Answer 3

你们可以查看我的代码进行深入研究吗？它在我点击第一张图表上的列后立即显示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
                }]
                })
            }
        });