主页 / 问题 / 946616
Accepted
IMadiev
Asked:2020-02-19 17:29:35 +0800 CST2020-02-19 17:29:35 +0800 CST

从 csv 数据构建 html 图表

  • 772

我有一个本地 csv 文件，如果可能的话，我想在同一个文件夹中拥有基于其数据构建的图形的 html。csv 每 24 小时更新一次，因此图表应随之更新。如何以最少的努力做到这一点？

javascript

1 个回答

  1. Best Answer
    <!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 <!-- http://t.co/dKP3o1e -->
 <meta name="HandheldFriendly" content="True">
 <meta name="MobileOptimized" content="320">

 <title>DatabaseStatistics</title>
 <meta name="description" content="test">

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="jquery.csv.min.js"></script>
 <script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript"> // load the visualisation API
  google.load('visualization', '1', { packages: ['corechart', 'controls'] });
</script>

<script type="text/javascript">
function drawVisualization() {
   $.get("mycsv.csv", function(csvString) {
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);
      // CAPACITY - En-route ATFM delay - YY - CHART
      var crt_ertdlyYY = new google.visualization.ChartWrapper({
         chartType: 'LineChart',
         containerId: 'mycsv',
         dataTable: data,
         options:{
            width: 600, height: 300,
            title: 'Мой график из csv',
            titleTextStyle : {color: 'black', fontSize: 20},
         }
      });
      crt_ertdlyYY.draw();
   });
}
google.setOnLoadCallback(drawVisualization)
</script>

</head>
<body>
<div id="mycsv"></div>
</body>
    • 1

相关问题