HighChart 使用小数据集呈现空白

Question

下面是我试图创建的图表，我直接从示例中获取它并替换了 x-axis 数据并添加到我自己的系列数据中。在控制台中，它打印出我使用的两个数组，如下所示：

Reports:28,16,1,4,6,4,5,31,59,43,31,56,4
HOURSSS:0,1,2,4,6,7,9,11,12,13,14,15,16

出于某种原因，图表最终看起来像下图。我已经被这个困扰了几个小时。知道发生了什么事吗？

var activityTotalDayByHour =  <?php echo json_encode($activityTotalDayByHour); ?>;
console.log("ACTIVITY:"+activityTotalDayByHour);
var Reports = [];
var Hours =[]
for (var i = 0; i < activityTotalDayByHour.length; i++) {
    Reports.push(activityTotalDayByHour[i]['Records']);
    Hours.push(activityTotalDayByHour[i]['Hour']);
}
$(function () {
        $('#highChartDiv').highcharts({
            chart: {
                type: 'area'
            },
            title: {
                text: 'US and USSR nuclear stockpiles'
            },
            subtitle: {
                text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
                    'thebulletin.metapress.com</a>'
            },
            xAxis: {
                categories: Hours
            },
            tooltip: {
                pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
            },
            series: [{
                name: 'USA',
                data:Reports
            }]
        });
    });
      </script>

编辑：

感谢@Jeromy French，我发现这一定是一些时髦的事情。我的数据源。当我将完全相同的数据插入静态数组时，它工作得很好，但是当我使用通过我的循环创建的数组时，它不起作用。更奇怪的是，如果我创建我的数据的 2 个版本（一个通过循环动态数据形成，另一个通过将完全相同的静态数据插入数组形成，它 console.log 完全相同，如下所示：

---Looped Versions----
Reports:28,16,1,4,6,4,5,31,59,43,31,56,10
HOURSSS:0,1,2,4,6,7,9,11,12,13,14,15,16
--Static Versions---
REPORTS_B:28,16,1,4,6,4,5,31,59,43,31,56,4
HOURS_B:0,1,2,4,6,7,9,11,12,13,14,15,16

var activityTotalDayByHour =  <?php echo json_encode($activityTotalDayByHour); ?>;
console.log("ACTIVITY:"+activityTotalDayByHour);
var Reports = [];
var Hours =[]
for (var i = 0; i < activityTotalDayByHour.length; i++) {
    Reports.push(activityTotalDayByHour[i]['Records']);
    Hours.push(activityTotalDayByHour[i]['Hour']);
}


var USA=[null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982];


console.log("Reports:"+Reports);
console.log("HOURSSS:"+Hours);

var Reports_b=[28,16,1,4,6,4,5,31,59,43,31,56,4],
    Hours_b=[0,1,2,4,6,7,9,11,12,13,14,15,16];

    console.log("REPORTS_B:"+Reports_b);
    console.log("HOURS_B:"+Hours_b);

Answer 1

在这里有点冒险，但我相信你的问题是因为你的 Reports 数组是由字符串（而不是数字）组成的 - 我也有同样的情况不时发布。

要么修改数据 Reports 正在从中提取数据，要么在推入 Reports 时进行修改：

for (var i = 0; i < activityTotalDayByHour.length; i++) {
    Reports.push(parseInt(activityTotalDayByHour[i]['Records'], 10));
    Hours.push(activityTotalDayByHour[i]['Hour']);
}

HighChart 使用小数据集呈现空白

HighChart Renders Blank with Small Data Set

javascript

jquery

highcharts