Question

我尝试使用谷歌图表apis创建折线图，其他用于跟踪csv数据。他们都没有帮助：

csv数据如下所示：

"Date,Term,Segment,Visitor"
"2014/01/01,2014/01/01 - 2014/01/31,All visitors,2"
"2014/01/01,2014/01/01 - 2014/01/31,New user,0"
"2014/01/01,2014/01/01 - 2014/01/31,Mobile traffic,0"
"2014/01/02,2014/01/01 - 2014/01/31,All visitors,7"
"2014/01/02,2014/01/01 - 2014/01/31,New user,1"
"2014/01/02,2014/01/01 - 2014/01/31,Mobile traffic,0"
"2014/01/03,2014/01/01 - 2014/01/31,All visitors,5"
"2014/01/03,2014/01/01 - 2014/01/31,New user,0"
"2014/01/03,2014/01/01 - 2014/01/31,Mobile traffic,0"
"2014/01/04,2014/01/01 - 2014/01/31,All visitors,3"
.............

我在使用谷歌图表时遇到了很多问题，你可以在这里找到：

CSV data loading give Not enough columns given to draw the requested chart

是否可以为这么短的数据创建折线图？

图表应如下所示：

-------- 更新代码 -----------

为什么它不在X-axix上显示偶数日期？

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-csv.googlecode.com/files/jquery.csv-0.71.js"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
    function drawChart() {
       $.get("Chart3-data1.csv", function(csvString) {
        var transData = [['Date', 'All visitors', 'New user', 'Mobile traffic']];
          var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

for (var i = 1; i < arrayData.length; i++) {
        console.log(arrayData[i][0]);
        var fields = arrayData[i][0].split(',');
        console.log(fields);
        switch ( (i - 1) % 3) {
        case 0:
            var allVisitors = parseInt(fields[3]);
            break;
        case 1:
            var newUser = parseInt(fields[3]);
            break;
        case 2:
            var mobile = parseInt(fields[3]);
            transData.push([ fields[0], allVisitors, newUser, mobile] );
            break;
        }
    }
          var data = new google.visualization.arrayToDataTable(transData);
         var options =
        {
                title: 'Company Performance'
         };
        var chart = new google.visualization.LineChart(document.getElementById('gauge'));
        chart.draw(data, options);
});
      }
    </script>
  </head>
  <body>
    <div id="gauge" style="width: 900px; height: 500px;"></div>
  </body>
</html>

结果图：

enter image description here

Answer 1

我将您的csv数据更改为：

Date, All visitors, New user, Mobile traffic
2014/01/01, 2, 0, 0
2014/01/02, 7, 1, 0
2014/01/03, 5, 0, 0
2014/01/04, 3, 0, 2
2014/01/05, 4, 1, 2

根据这些数据生成此图表（代码无变化）：

enter image description here

数据更改 - JS的一个选项：

$.get("chart-data-orig.csv", function(csvString) {
    var transData = [['Date', 'All visitors', 'New user', 'Mobile traffic']];

    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

    // index 0 is header which will be changed
    for (var i = 1; i < arrayData.length; i++) {
        console.log(arrayData[i][0]);
        var fields = arrayData[i][0].split(',');
        console.log(fields);

        switch ( (i - 1) % 3) {
        case 0:
            var allVisitors = parseInt(fields[3]);
            break;
        case 1:
            var newUser = parseInt(fields[3]);
            break;
        case 2:
            var mobile = parseInt(fields[3]);
            transData.push([ fields[0], allVisitors, newUser, mobile] );
            break;
        }
    }

    var data = new google.visualization.arrayToDataTable(transData);
    var options = {
        title: 'Company Performance'
    };

    var chart = new google.visualization.LineChart(
                        document.getElementById('chart_div'));
    chart.draw(data, options);
});

是否可以使用以下csv数据创建折线图

1 个答案: