Question

我有一个使用PHP从MySQL检索的JSON对象。它如下：

{
    'A': [1, 2, 3],
    'B': [4, 5, 6],
    'C': [7, null, null]
}

内容可能会有所不同，因为它完全取决于在任何时间点从数据库中检索的数据。现在在Javascript中我正在绘制HighCharts，并且需要使用从JSON对象中检索到的数据，即我有系列：< / p>

[{
    name: 'A',
    data: [1, 2, 3]
}, {
    name: 'B',
    data: [4, 5, 6]
}, {
    name: 'C',
    data: [7, , ]
}]

这里我输入了数组数据，但它必须是动态的，因为我不知道数组的内容。我的预期输出如下：

[{
    name: ' A ',
    data: Array[' A ']
    // should give the data of [1,2,3]
}, {
    name: ' B ',
    data: Array[' B ']
}, {
    name: ' C ',
    data: Array[' C ']
}]

请建议如何进行？

Answer 1

看着你的小提琴后，我想我知道什么是错的。您的服务器响应对象将data作为字符串数组。显然，highcharts不会自动将这些字符串解析为数字，但您可以将数组映射到数字：

series: [{
  name: 'A',
  data: myo['A'].map(parseInt)
}, {
  name: 'B',
  data: myo['B'].map(parseInt)
}, {
  name: 'C',
  data: myo['C'].map(parseInt)
}]

Answer 2

您可以使用JSON_NUMERIC_CHECK http://php.net/manual/en/json.constants.php在php中形成正确的关联数组。

对于当前场景，您可以动态更新json数据

{
    'A': [1, 2, 3],
    'B': [4, 5, 6],
    'C': [7, null, null]
}

到必需的表格

[{
  "name": "A",
  "data": [1, 2, 3]
}, {
  "name": "B",
  "data": [4, 5, 6]
}, {
  "name": "C",
  "data": [7, 0, 0]
}]

使用下面的代码

var dataJ = {
  'A': [1, 2, 3],
  'B': [4, 5, 6],
  'C': [7, null, null]  
}
var highchartsData = []; //series data
Object.keys(dataJ).map((el) => {
  highchartsData.push({
    name: el,
    data: dataJ[el].map(Number) //convert to number
  })
})

＆＃13;

var dataJ = {
  'A': [1, 2, 3],
  'B': [4, 5, 6],
  'C': [7, null, null]
}
var highchartsData = [];
Object.keys(dataJ).map((el) => {
  highchartsData.push({
    name: el,
    data: dataJ[el].map(Number)
  })
})


Highcharts.chart('container', {

  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },

  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },

  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },


  series: highchartsData,

  responsive: {
    rules: [{
      condition: {
        maxWidth: 500
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  }

});

＆＃13;

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

＆＃13;

Javascript HighChart有多个名字＆amp; Series和json对象中的数据

2 个答案: