Javascript HighChart 在 Series 和 json 对象中有多个名称和数据

Posted 2023-02-24

【中文标题】Javascript HighChart 在 Series 和 json 对象中有多个名称和数据

【英文标题】：Javascript HighChart having multiple name & data in Series and json object

【发布时间】：2018-07-12 12:25:00

【问题描述】：

我有一个使用 php 从 mysql 中检索到的 JSON 对象。如下：

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

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

[
    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 ']
]

请建议如何进行？

【问题讨论】：

你能贴出检索数据的代码吗？

$dataarr="SELECT Data,Year,Type from tablename where Type IN(SELECT DISTINCT(Type) from tablename) order by Type, Year"; $resultdata=$mysqli->查询($dataarr); $列表=数组（）； while($row=$resultdata->fetch_assoc()) $list[$row['Type']][]=$row['Data']; $tdata=json_encode($list);回声 $tdata;

xmlhttp.onreadystatechange=function() if(this.readyState==4 && this.status==200) var myobj=JSON.parse(this.responseText); doChart(myobj);

@csp713 上面分别是PHP和Javascript代码sn-ps

所以myobj 是带有预期数据的响应，而doChart 创建图表？那是什么问题，或者我错过了什么？

【参考方案1】：

你可以使用JSON_NUMERIC_CHECKhttp://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
  )
)

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

);

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

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

【参考方案2】：

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

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

【讨论】：

哦，我去看看

您好，请检查这个小提琴，我已经编辑了您的代码：jsfiddle.net/y1wu731z 当我将 JSON obj 设置为 10.1: ["1","2","3"], 10.2: [ "5", "5", "6" ] myo.10.1 不起作用？

很高兴它成功了。请注意，myo."10.1" 是不对的。检查this。要使用点表示法，“属性必须是有效的 JavaScript 标识符”。由于10.2 不是，您必须使用括号表示法（myo['10.2']）。

嗨 parseInt 似乎不适用于所有元素..我得到这个：document.write(myo['10.1']+ "\n");// 输出 43934,52503,57177, 69658,97031,119931,137133,154175 document.write(myo['10.1'].map(parseInt)); //输出 43934,NaN,NaN,NaN,NaN,6,9,617 为什么会这样？