Question

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

报告：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>

enter image description here

编辑：

感谢@Jeromy French我发现它必须是一个时髦的东西。我的数据来源。当我将完全相同的数据插入到静态数组中时它可以正常工作，但是当我使用通过我的循环创建的数组时它不起作用。更奇怪的是，如果我创建了两个版本的数据（一个是通过循环动态数据形成的，另一个是通过将完全相同的静态数据插入到数组中而形成的，那么console.log＆＃39; s就像这样：

---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使用小数据集渲染空白

1 个答案: