donglie1994 2018-02-02 03:27
浏览 82
已采纳

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

I have a JSON object which is retrieved from MySQL using PHP.It is as follows:

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

The content can vary as it totally depends on data retrieved from database at any point of time.Now in Javascript I 'm plotting HighCharts, and need to use the data retrieved from JSON object, i.e. I' m having series:

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

Here I have typed array data, but it has to be dynamic, as I'll not be knowing the contents of the array. My expected output is as follows:

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

Kindly suggest how to proceed?

  • 写回答

2条回答 默认 最新

  • dtpw54085 2018-02-02 05:44
    关注

    You can use JSON_NUMERIC_CHECK http://php.net/manual/en/json.constants.php to form proper associative array in php.

    For current scenario you can update you json data dynamically

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

    to required form

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

    by using code below

    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>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 qt+ffmpeg报错non-existing PPS 0 referenced
  • ¥15 FOC simulink
  • ¥15 咨询一下有关于王者荣耀赢藏战绩
  • ¥50 MacOS 使用虚拟机安装k8s
  • ¥500 亚马逊 COOKIE我如何才能实现 登录一个亚马逊账户 下发新 COOKIE ..我使用下发新COOKIE 导入ADS 指纹浏览器登录,我把账户密码 修改过后,原来下发新COOKIE 不会失效的方式
  • ¥20 玩游戏gpu和cpu利用率特别低,玩游戏卡顿
  • ¥25 oracle中的正则匹配
  • ¥15 关于#vscode#的问题:把软件卸载不会再出现蓝屏
  • ¥15 vimplus出现的错误
  • ¥30 怎么使用AVL fire ESE软件自带的优化模式来优化设计Soot和NOx?