Question

我正在尝试从csv数据创建仪表图表。以下函数运行良好，但它将一个char视为string输入。我相信这部分决定了从csv中读取多少个单词

hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
            vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},

它只读取这个简短的数据：

Category,' '
E,24
m,34
m,0
y,10
y,6
r,6

我想要阅读的实际数据是：

Engine,24
min,34
max,0
yellowFrom,10
yellowTo,6
redFrom,6
redTo,0

有人可以告诉我需要改进的地方吗？

function drawChart() {
       $.get("Chart2-data.csv", function(csvString) {
          // transform the CSV string into a 2-dimensional array
          var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
          var data = new google.visualization.arrayToDataTable(arrayData);
          var view = new google.visualization.DataView(data);
          view.setColumns([0,1]);
         var options = {
        title: "A Chart from a CSV!",
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
        vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
        legend: 'none'
         };
        var chart = new google.visualization.Gauge(document.getElementById('gauge'));
        chart.draw(data, options);
});
      }

整个代码：

<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:["gauge"]});
      google.setOnLoadCallback(drawChart);

    function drawChart() {
       // grab the CSV
       $.get("Chart2-data.csv", function(csvString) {
          // transform the CSV string into a 2-dimensional array
          var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
        alert(arrayData);
          // this new DataTable object holds all the data
          var data = new google.visualization.arrayToDataTable(arrayData);

          // this view can select a subset of the data at a time
          var view = new google.visualization.DataView(data);
          view.setColumns([0,1]);

         // set chart options
         var options = {
        title: "A Chart from a CSV!",
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
        vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
        legend: 'none'
         };

        var chart = new google.visualization.Gauge(document.getElementById('gauge'));
        chart.draw(data, options);
});
      }
    </script>
  </head>
  <body>
    <div id="gauge" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Answer 1

那些东西=好的，只需删除此部分：

title: "A Chart from a CSV!",
        hAxis: {title: data.getColumnLabel(0), minValue: data.getColumnRange(0).min, maxValue: data.getColumnRange(0).max},
        vAxis: {title: data.getColumnLabel(1), minValue: data.getColumnRange(1).min, maxValue: data.getColumnRange(1).max},
        legend: 'none'

在csv数据中添加级别

label,value
Engine,24
min,34
max,0
yellowFrom,10
yellowTo,6
redFrom,6

它会很好用

读取csv数据以创建图表

1 个答案: