我需要将一长串数字格式化为数小时。 您可以在列下看到花费的时间很长,这些是需要格式化的时间,看起来不像现在这样,6,000,需要看起来像6,000小时。
我有另外一个请求我能够格式化Amount花费列但是我不知道如何格式化hAxis部分以显示美元符号。
我是Google Charts的新手,这是一个快速学习者。看起来文档似乎已经散布开来。
google.charts.setOnLoadCallback(drawTimeAndAmountSpentTimeLineChart);
//Amount Completed
function drawTimeAndAmountSpentTimeLineChart() {
var data = google.visualization.arrayToDataTable([
['Web Design', 'Amount Spent', 'Time Spent'],
['Rendering Engines', 5000, 68000],
['User Management', 9000, 44000],
['Database', 5700, 32000],
['Security', 9000, 21000]
]);
var options = {
title: 'Amount Spent Per Task',
chartArea: { width: '70%' },
hAxis: {
title: 'Total Spent',
minValue: 0,
prefix: '$'
},
vAxis: {
title: 'Task'
}
};
var formatter = new google.visualization.NumberFormat({ prefix: '$' });
formatter.format(data, 1);
var chart = new google.visualization.BarChart(document.getElementById('timeAndAmountSpentTimeLineChart_div'));
chart.draw(data, options);
};
如果没有要求太多的杆,水平运行需要高约50px而不是微小的高度。这将是一个很大的帮助。
我不知道为什么它不是在我的机器中绘制js小提琴。
答案 0 :(得分:1)
使用pattern
的{{1}}属性'Time Spent'
表示x轴标签 - > hAxis.format
请参阅以下工作代码段...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Web Design', 'Amount Spent', 'Time Spent'],
['Rendering Engines', 5000, 68000],
['User Management', 9000, 44000],
['Database', 5700, 32000],
['Security', 9000, 21000]
]);
var options = {
title: 'Amount Spent Per Task',
chartArea: { width: '70%' },
hAxis: {
title: 'Total Spent',
minValue: 0,
format: '$#,##0'
},
vAxis: {
title: 'Task'
}
};
var formatAmt = new google.visualization.NumberFormat({ prefix: '$' });
formatAmt.format(data, 1);
var formatTime = new google.visualization.NumberFormat({ pattern: '#,##0 hrs' });
formatTime.format(data, 2);
var chart = new google.visualization.BarChart(document.getElementById('timeAndAmountSpentTimeLineChart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeAndAmountSpentTimeLineChart_div"></div>