在Highcharts中读取json文件时没有输出

时间:2015-08-26 14:43:46

标签: json file highcharts

我正在阅读json文件

http://www.megafileupload.com/dq4u/data.json

<html>
<head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
        <script src="http://code.highcharts.com/stock/highchart.js"></script>
    <script>

   $(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'heatmap'
        },
          title: {
            text: 'pairwise LD'
        },

        xAxis: {
            categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
        },

        yAxis: {
            categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
            title: null
        },

        colorAxis: {
            min: 0,
            minColor: '#FFFFFF',
            maxColor: Highcharts.getOptions().colors[0]
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280
        },
        plotOptions:{
                   series:{
                          turboThreshold: 0
                          }
        },
        series: [{}]
    };

    $.getJSON('data.json', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });

});

</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

但是没有输出,而当我在代码中粘贴相同的值时,我可以看到输出。请帮助我如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

在您的图表中,您使用的热图不是内置的高品质核心,因此您需要添加对http://code.highcharts.com/modules/heatmap.js的引用。

我建议您运行一个控制台(https://developer.chrome.com/devtools/docs/console),其中所有错误都与说明一起返回,然后您可以避免上述问题。