如何将数据从JSON提取到JavaScript Highchart



这是我的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代码,可以创建HighChart:

<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获取JSON的数据?但是我不知道为什么我的HTML页面是空白页面,看不到任何图表...

在浏览器控件中尝试一下您可以看到分析结果,然后在项目中使用它

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"}}")

js小提琴示例

在系列中添加您的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]
          }]
      });

最新更新