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>

该列未显示，仅以1系列显示4个数据：1801 1802 1803和1804。我想用不同的数据（OGS编号）使它们成为每个系列。

Answer 1

enter image description here您的数据格式不正确。如果需要将const obj = {1: "1", 2: "1", 3: "1"}, res = Object.keys(obj).map(key => ({id: key, quantity:obj[key]})); console.log(res);绘制为x轴，则需要将它们放在单独的数组中并将其分配给xAxis。

yAxis还接受一个对象数组，该对象需要具有两个键，例如STRM和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
});

Answer 2

要达到预期效果（每列都是一个单独的系列），可以采用以下方法：

准备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 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
                }]
                })
            }
        });

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

3 个答案: