个人中心
gpt4 book ai didi

javascript - 从 CSV 加载 Google Annotation Chart

转载 作者：行者123 更新时间：2023-11-29 15:09:21 24 4
gpt4 key购买 nike

我正在尝试通过使用此处找到的示例从 CSV 文件加载一些数据来创建 Google 注释图表:

https://developers.google.com/chart/interactive/docs/gallery/annotationchart

我尝试修改代码(使用我有限的 JS 知识)以从 CSV 文件加载，但我没有得到任何图表。

到目前为止我的代码:

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() 
{
$.get('test.csv', function(csvString) 
{
var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
arrayData = arrayData.map(function (row) 
{
return 
[new Date(row[0]),row[1]];
});


var data = google.visualization.arrayToDataTable(arrayData);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));

var options = {
displayAnnotations: true
};

chart.draw(data, options);
}
}
</script>
</head>

<body>
<div id='chart_div' style='width: 900px; height: 500px;'></div>
</body>
</html>

CSV 文件

Date,Value1
2014-01-01,1233
2014- 01-02,1334
2014-01-03,1488
2014-01-04,1888
2014-01-05,2011
2014-01-06,1900
2014-01-07,1768
2014-01-08,2345

最佳答案

首先，将 jquery 和 jquery csv 添加到您的页面。 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

然后将代码替换如下。
看评论解释...

// load google charts
google.charts.load('current', {
  packages: ['annotationchart']
}).then(function () {
  // declare data variable
  var arrayData;

  // get csv data
  $.get('test.csv', function(csvString) {
    // get csv data success, convert to an array, draw chart
    arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});
    drawChart(arrayData);
  }).fail(function () {
    // get csv data failed, draw chart with hard-coded data, for example purposes
    arrayData = [
      ['Date','Value1'],
      ['2014-01-01',1233],
      ['2014-01-02',1334],
      ['2014-01-03',1488],
      ['2014-01-04',1888],
      ['2014-01-05',2011],
      ['2014-01-06',1900],
      ['2014-01-07',1768],
      ['2014-01-08',2345],
    ];
    drawChart(arrayData);
  });
});

// draw chart
function drawChart(arrayData) {
  // convert string in first column to a date
  arrayData = arrayData.map(function (row) {
    return [new Date(row[0]),row[1]];
  });

  // create google data table, chart, and options
  var data = google.visualization.arrayToDataTable(arrayData);
  var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
  var options = {
    displayAnnotations: true
  };

  // draw chart
  chart.draw(data, options);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意:您可以删除 fail 回调，它是为了在堆栈溢出时用作示例...

关于javascript - 从 CSV 加载 Google Annotation Chart，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56371963/

24 4 0
文章推荐： javascript - Ext 或 Ext_scaffold 中的 bool 字段已损坏？
文章推荐： javascript - D3可以读取 "Geojson"文件吗？
文章推荐： mysql - Mysql 5有管理分层数据的程序吗？
文章推荐： javascript - 如何使用Puppeteer获取指定元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com