Question

我整天都在研究这个HighCharts示例，并且无法完成所有工作。我正在显示几个在getJSON调用中检索的数据系列。图表被放入其容器DIV中，但没有绘制数据，并且javascript控制台上没有错误。

我认为问题必须在JSONP调用格式中，但我看不出它有任何问题。 JSONP服务位于：http://199.38.183.107/ow/fludata.php?callback=?

<html>
<head>
<title>Demonstration of web service</title>
<style type="text/css">
.chart-container {
    width: 100%;
    height: 100%;
}
</style>
</head>

<body>

<div id="container" style="width: 100%; height: 400px;"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">       </script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<script>

$(function () {
  $.getJSON('http://199.38.183.107/ow/fludata.php?callback=?', function(data){
    $('#container').highcharts({
      chart: {
        type: 'spline'
  },
  title: {
    text: 'Weekly influenza infection counts'
  },
  subtitle: {
    text: 'Data series show the CDC Regions'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
    }
  },
  yAxis: {
    title: {
      text: 'Number of infections reported'
    },
    min: 0
  },
  plotOptions: {
    series: {
      marker: {enabled: false},
      turboThreshold: 1000000,
      states: {hover: {enabled: false}}
    }
  },
  tooltip: {
        formatter: function() {
           return '<b>'+ this.series.name +'</b><br/>'+ Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
        }
      },
      series: data,
      credits: { enabled: false }
    }); //container
  }); //getJSON
}); //function

Answer 1

问题在于您的日期/时间。你应该把你的时间乘以1000

Answer 2

我把数据系列包裹起来，这些数据系列是正确的大括号，带有一个外部花括号。它应该是一个方括号，因为它返回一个对象数组。谢谢你们的帮助。因此，当您需要通过JSON向Highcharts发送多个具有多个部分（日期和时间，或者开始和结束范围）的系列时，您需要：

[{name:my1stSeries, data:[[1,2],[3,4],...,[m,n]]},{name:my2ndSeries, data:[[5,6],[7,8],...,[o,p]])]

Answer 3

我认为来自网址的json数据可能不是High Charts的正确格式。尝试在getJSON函数中包含onError函数并检查错误。

HighCharts仅显示标题

3 个答案: