Google Charts 双 Y 轴线上的 Y 轴格式 [英] Y-Axis format on Google Charts dual Y-Axis Line
问题描述
我想格式化我的谷歌双 Y 轴折线图的 Y 轴.这是我正在使用的代码:
I would like to format the Y Axis of my google Dual Y Axis Line Chart. Here the code I'm using:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Pressure'},
Daylight: {label: 'Temps (Celsius)'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
var classicChart = new google.visualization.LineChart(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>
</head>
<body>
<br><br>
<div id="chart_div"></div>
</body>
</html>
我希望 Y 轴能够在 Y 轴(对于机器人 Y 轴)以及工具提示消息上显示未四舍五入的数据(现在它只显示 1K 值而不是十进制).工具提示消息始终显示在压力值 1K 和温度值上，不带小数点的值...
I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message. The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...
有人可以帮我吗?
谢谢！
西蒙
PS:数据是从 php 脚本动态创建的，但现在这不重要:)
PS: The data is created dynamically from a php script, but thats not important now :)
推荐答案
使用 NumberFormat 格式化data
这将设置工具提示的格式...
this will set the format of the tooltip...
// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});
// format column 1 - Pressure
formatNumber.format(data, 1);
// format column 2 - Temperature
formatNumber.format(data, 2);
要格式化两个 y 轴，请将其添加到 materialOptions...
to format both y-axis', add this to materialOptions...
vAxis: {
format: '#,##0.0'
}
还建议将 google.charts.Line.convertOptions 与 Material 图表一起使用
also recommend using google.charts.Line.convertOptions with Material charts
请参阅以下工作片段...
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', "Average Pressure");
data.addColumn('number', "Average Temperature");
data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
]);
var formatPattern = '#,##0.0';
var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
formatNumber.format(data, 1);
formatNumber.format(data, 2);
var materialOptions = {
chart: {
title: 'Average Pressure and Temperatures'
},
width: 1200,
height: 600,
series: {
0: {axis: 'Pressure'},
1: {axis: 'Temperature'}
},
axes: {
y: {
Temps: {
label: 'Pressure'
},
Daylight: {
label: 'Temps (Celsius)'
}
}
},
vAxis: {
format: formatPattern
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>这篇关于Google Charts 双 Y 轴线上的 Y 轴格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
