Question

您好我正在尝试使用Highcharts库创建热图。我正在从CSV文件中获取数据。我的CSV文件有三个参数：

Events,Apps,Status
Business Requirement Description,App1,60
Communication to Stake Holders,App1,50
Development Started,App1,30
Reviewed ,App1,10
Ready for E2E Testing,App1,5
Business Requirement Description,App2,80
Communication to Stake Holders,App2,40
Development Started,App2,20
Reviewed ,App2,10
Ready for E2E Testing,App2,0
Business Requirement Description,App3,100
Communication to Stake Holders,App3,60
Development Started,App3,0
Reviewed ,App3,30
Ready for E2E Testing,App3,0

导入所需文件：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>

这是我要初始化的Javascript代码：

<script language="javascript">
$(document).ready(function() {var options = {
chart: {
    renderTo:'container',
    type : 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
},
title: {
    text: 'DIT HeatMap Sample'
},
xAxis: {
    categories: []
},
yAxis: {
categories: [],
    title: {
        text: 'Apps'
    }
},
series: [{}]
};

定义colorAxis，工具提示和图例：

  colorAxis: {
    min: 0,
    ***minColor: '#FFFFFF'***,
    maxColor: Highcharts.getOptions().colors[0]},
 legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 25,
            symbolHeight: 280},
     tooltip: {
            formatter: function () {
                return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> is <br><b>' +
                    this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
            }
        }

以下是我读取CSV文件的代码，该文件与我的html文件位于同一位置。

 //Fetching the CSV data

    $.get('DITData.csv', function(data){
        var lines = data.split('\n');
        $.each(lines, function(lineNo, line){
        var items = line.split(','); 
        })
    // Defining X-Axis: 

        $.each(items, function(itemNo, item){
        if(itemNo == 0){
        $.each(lines, function(lineNo, line){
        if (lineNo > 0)
        options.xAxis.categories.push(item)});
        }
    // Defining X-Axis: 

        else if (itemNo == 1){
        $.each(lines, function(lineNo, line){
        if (lineNo > 0)
        options.yAxis.categories.push(item)});
        }
        else {
                var series = {
                data: []
                };
// Defining the series:

    $.each(lines, function(lineNo, line){
        if (lineNo > 0)
        series.data.push(parseFloat(item));
        });
        options.series.push(series);    

    }
    });
    var chart = new Highcharts.Chart(options);
});

</script> 
</head>

最后在容器中调用容器。

<body>
    <div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
</body>

但是我没有得到任何输出，我已经按照教程和语法以及我自己的逻辑，我不确定是什么问题。控制台说我在粗体和斜体显示的Line处出现意外错误。任何Highcharts或JavaScript专家，请帮助我!!

提前感谢!!

使用来自csv文件的highcharts javascript的热图

0 个答案: