javascript - 如何在谷歌图表中应用格式简单方法
问题描述
我在网上看到了很多关于这个问题的答案,但每个人的回答方式都不一样。他们用代码示例回答了 90 多行代码,因此很难理解应用格式的方法。有人可以解释一下在谷歌图表中应用格式的方法,不同类型的图表有不同的方法吗?我需要在条形图和圆环图上应用格式。我想将格式更改为货币和小数。
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Marketplaces', 'Number Of Orders','Value of Order'],
var chart = new google.visualization.PieChart(document.getElementById('sales_total_quantity'));
chart.draw(data, options);
}
解决方案
为了格式化图表值,当条形图或饼图悬停时显示,
您需要将格式应用于数据表。
你可以使用谷歌的数字格式化程序。
var patternCurrency = '$#,##0.00';
// format third column of data table
var formatCurrency = new google.visualization.NumberFormat({
pattern: patternCurrency
});
formatCurrency.format(data, 2);
如果您还希望条形图的 y 轴显示为货币,则
需要使用配置选项 -->vAxis.format
var optionsBar = {
// format y-axis
vAxis: {
format: patternCurrency
}
};
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Marketplaces', 'Number Of Orders', 'Value of Order'],
['A', 10, 100.11],
['B', 20, 200.22],
['C', 30, 300.33],
]);
var patternCurrency = '$#,##0.00';
// format third column of data table
var formatCurrency = new google.visualization.NumberFormat({
pattern: patternCurrency
});
formatCurrency.format(data, 2);
var optionsBar = {
tooltip: {
trigger: 'both'
},
// format y-axis
vAxis: {
format: patternCurrency
}
};
var chartBar = new google.visualization.ColumnChart(document.getElementById('chart-bar'));
google.visualization.events.addListener(chartBar, 'ready', function () {
// show tooltip
chartBar.setSelection([{column: 2, row: 0}]);
});
chartBar.draw(data, optionsBar);
var optionsPie = {
height: 300,
pieHole: 0.2
};
var chartPie = new google.visualization.PieChart(document.getElementById('chart-pie'));
chartPie.draw(data, optionsPie);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart-bar"></div>
<div id="chart-pie"></div>
推荐阅读
- python - 我不能使用 numpy.zeros 函数 'TypeError: 'list' object is not callable'
- r - 来自维基百科的 R 程序没有绘图
- python - 如何在python中创建一个自动填写表格的程序?
- python - ImportError:无法从“neo4j.v1”(/usr/local/lib/python3.7/site-packages/neo4j/v1/__init__.py)导入名称“CypherError”
- excel - 用于将多个文本文件中的数据提取到 Excel 电子表格中的 Powershell 脚本
- javascript - 当输入填充 1 个整数时自动移动到下一个选项卡
- amazon-web-services - 使用图像参数更改触发 Cloudformation Blue/Green
- php - 如何使用 Yii2 框架在链接中添加标题属性?
- javascript - 功能组件未呈现
- sql - 在关键字后面的字符串中提取字符并在另一个关键字之前结束