如何从json提取数据到javascript高图?

时间:2017-05-03 01:54:00

标签: javascript json highcharts

这是我的json文件的一部分,数据包含这个无用的符号''\'' ...:

    "{\"0\":{\"index\":23,\"indicator\":\"ClassC Time\",\"month\":201611,\"ww\":201648,\"test_time\":0.0,\"p\":48.0,\"Product\":\"RB\"},\"1\":{\"index\":24,\"indicator\":\"ClassC\",\"month\":201612,\"ww\":201649,\"test_time\":47.48,\"p\":48.0,\"Product\":\"RB\"}

下面是我创建高图的javascript代码:

<script type='text/javascript'>
$(document).ready(function() {
var options = {
  chart: {type: 'line',height: 250,},
  title: {text: 'Sky'},
  subtitle: {text: 'May 11, 2016'},
  xAxis: {categories: ['9:30 am', '10:00 am', '10:30 am', '11:00am', '11:30 am', '12:00 pm','12:30 pm', '1:00 pm', '1:30 pm', '2:00 pm', '2:30 pm','3:00 pm', '3:30 pm', '4:00 pm'],
  labels: {step: 3}},
  legend: {enabled: false},
  series: [{
    name: 'Nasdaq',
    color: '#4572A7',
    data: [2606.01, 2622.08, 2636.03, 2637.78, 2639.15, 2637.09,
      2633.38, 2632.23, 2632.33, 2632.59, 2630.34, 2626.89, 2624.59, 2615.98
    ]}]};$('#container').highcharts(options);});</script>

如何使用 $ getJSON 来包含在我的javascript中?我尝试关注highcharts get data by JSON?,但我不知道为什么我的html页面是空白页面,无法看到任何图表......

2 个答案:

答案 0 :(得分:0)

在浏览器控件中尝试此操作,您可以看到已解析的结果,然后在项目中使用它

JSON.parse("{\"0\":{\"index\":23,\"indicator\":\"ClassC Time\",\"month\":201611,\"ww\":201648,\"test_time\":0.0,\"p\":48.0,\"Product\":\"RB\"},\"1\":{\"index\":24,\"indicator\":\"ClassC\",\"month\":201612,\"ww\":201649,\"test_time\":47.48,\"p\":48.0,\"Product\":\"RB\"}}")

答案 1 :(得分:0)

Js fiddle example

串联添加JSON文件

             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'
          },

          plotOptions: {
              series: {
                  pointStart: 2010
              }
          },

          series: [{
              name: 'Installation',
              data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
          }, {
              name: 'Manufacturing',
              data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
          }, {
              name: 'Sales & Distribution',
              data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
          }, {
              name: 'Project Development',
              data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
          }, {
              name: 'Other',
              data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
          }]

      });