Question

我尝试使用从csv文件导入的数据创建柱形图。我已经在互联网上尝试了所有可能的解决方案，但无法找出问题的解决方案。我试图在x轴上显示Shop Name，在y轴上显示Sales。

这是我的代码：

      <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />

        <style>
        body{
            margin-top: 30px;
            margin-left:40px;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>      
        <script src="http://code.highcharts.com/highcharts.js"></script>
                <script src="http://code.highcharts.com/modules/data.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.3.5/papaparse.js"></script>
</head>
<body>



    </div>
    <div id="container" style="height: 400px"></div>
        <script type="text/javascript">
            $(function () {
                $.get('stores.csv', function(csvdata) {
                    var data = Papa.parse(csvdata);
                 $('#container').highcharts({
                            chart: {
                                type: "column"
                            },
                            title: {
                                text: "Sales Analysis"
                            },
                            xAxis: {
                                ShopName: []
                            },
                            yAxis: {
                                title: {
                                    text: "Sales"
                                }
                            },
                            data: {
                                csv: data

                            },
                            plotOptions: {
                                series: {
                                    marker: {
                                        enabled: false
                                    }
                                }
                            }
                    });
                });
            });
    </script>
</body>
</html>

csv文件（stores.csv）：

Longitude,Latitude,ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad  Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1  9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura   239 - G T Road,Baghbanpura,49901

Answer 1

这只是为了举例说明如何在解析.csv数据时使用Highchart绘制图表。代码简单易懂。

<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>      


</head>
<body>

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

<script type="text/javascript">
$.get('stores.csv', function(data) {

var lines = data.split('\n');
console.log(lines);
var shopNameData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
    {
    shopNameData[lineNo-1] = lineContent.split(',')[2];
    }
});

var salesData=[];
$.each(lines, function(lineNo, lineContent){
if(lineNo > 0)
    {
    salesData[lineNo-1] = parseFloat(lineContent.substring(lineContent.lastIndexOf(",")+1) );
    }
});

console.log(shopNameData);
console.log(salesData);

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sales Analysis'
    },
    subtitle: {
        text: 'put subtitle here'
    },
    xAxis: {
        categories: shopNameData,
        crosshair: false
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Sales (in Rupees)'
        }
    },
   tooltip: {
        headerFormat: '<b>Shopname:</b> {point.x}<br/>',
        pointFormat: '<b>{series.name}:</b> {point.y}<br/>'
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Sales',
        data: salesData

    } ]
});

});


</script>
</body>
</html>

使用

.csv文件：

Longitude,Latitude, ShopName,ShopAddress,Sales
73.2350874,34.1990918,Abbotaqbad  Civic Shopping Center,Mansehra Road Mandian,29719
74.3062887,31.5673136,Anarkali 1  9 - Babar Market,Anarkali,14212
74.3040372,31.5643123,Anarkali 263 - Babar Market,Anarkali,35928
74.4559979,31.5931715,Baghbanpura   239 - G T Road,Baghbanpura,49901

需要注意的要点

请注意，在.csv中，逗号后面没有空格，因此.csv必须遵循这一点，否则您必须编辑逻辑以形成shopNameData和salesData
在某个服务器的某个位置托管.html和.csv。否则，在Google Chrome中，您将收到CrossOrigin错误。

如果您要复制html并将.csv命名为stores.csv并将其命名为某个服务器中html和host的同一目录，则以下是Chart的快照。

使用csv数据绘制高图的正确格式

1 个答案: