javascript - 谷歌图表使用 https://www.gstatic.com/charts/loader.js
问题描述
我有一个简单的代码,它加载内容数组并绘制饼图。
<script type=text/javascript src=https://www.gstatic.com/charts/loader.js></script>
<script type=text/javascript>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
],false);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
我想从 txt 文件中读取数据表,其内容如下:
Task,Hours Per Day
Work,11
Eat,2
Sleep,7
有没有什么办法可以直接加载上面代码中的txt文件?该文件也可能会不断变化。
解决方案
您可以使用 jquery 获取文本文件并转换为数组。
您需要包含两个 jquery 文件,jquery 本身和 jquery csv,
以及 google 图表库。
请参阅以下片段...
<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>
<script>
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var options = {
title: 'My Daily Activities',
height: 500,
width: 900
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
// get text file
$.get('pie.txt', function(txt) {
// convert csv to an array
var arrayData = $.csv.toArrays(txt, {onParseValue: $.csv.hooks.castToScalar});
var data = google.visualization.arrayToDataTable(arrayData);
chart.draw(data, options);
});
});
</script>
<div id="piechart"></div>
推荐阅读
- javascript - Angular 7 - 为 primeNg 菜单栏实现键盘快捷键
- python - 有没有办法接受参数选择作为单个字符串
- reactjs - 使用移除的 Babel 5 选项:base.modules - 使用相应的模块转换插件
- javascript - 我无法让我的应用使用组件文件中的 navigationOptions 而不是路由
- tensorflow - 一旦 CNN 被训练,它的输出是否应该是确定性的?
- charts - 在谷歌图表上一起使用字符串、时间、数字时如何修复“visualization.ComboChart”?
- javascript - 如何使用 Jasmine 1.3.1 和 Atom 进行异步测试
- javascript - 验证用户提交的位置
- node.js - 如何翻译外部路由器,使用 i18n + express 请求?
- javascript - 尽管所有反应路由器版本冲突,如何在反应中进行服务器端渲染?