Javascript 谷歌图表上的Y轴格式双Y轴线_Javascript_Charts_Google Visualization

Javascript 谷歌图表上的Y轴格式双Y轴线

javascript charts google-visualization

Javascript 谷歌图表上的Y轴格式双Y轴线,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我想格式化我的谷歌双Y轴折线图的Y轴。下面是我使用的代码： <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', '

我想格式化我的谷歌双Y轴折线图的Y轴。下面是我使用的代码：

<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>


load（'current'，{'packages'：['line'，'corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var chartDiv=document.getElementById（'chart_div'）；
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
数据。添加列（“数字”，“平均压力”）；
data.addColumn（'数字'，“平均温度”）；
data.addRows([
[新日期（2016年8月29日00月03日），1019.2,23.7]，
[新日期（2016年8月29日00月06日00），1019.27日23.6]，
[新日期（2016年8月29日00月09日00），1019.37日23.6]，
[新日期（2016年8月29日00月12日），1019.34日23.6]，
（…剪切数据…）
[新日期（2016、08、29、14、33、00）、1014.89、30.8]，
[新日期（2016、08、29、14、36、00）、1014.81、30.6]，
[新日期（2016、08、29、14、39、00）、1014.82、30.8]，
[新日期（2016、08、29、14、42、00）、1014.76、31.1]，
[新日期（2016、08、29、14、45、00）、1014.7、31]，
[新日期（2016、08、29、14、48、00）、1014.67、30.6]，
[新日期（2016、08、29、14、51、00）、1014.73、31]，
[新日期（2016、08、29、14、54、00）、1014.74、30.7]，
[新日期（2016、08、29、14、57、00）、1014.77、30.5]，
[新日期（2016、08、29、15、00、00）、1014.75、30.1]，
]);
变量材料选项={
图表：{
标题：“平均压力和温度”
},
宽度：1200，
身高：600，
系列：{
//为每个系列指定一个与下面的Y轴匹配的轴名称。
0:{轴：'压力'}，
1:{轴：'温度'}
},
轴线：{
//向每个轴添加标签；标签不必与轴名称匹配。
y:{
温度：{label:'Pressure'}，
日光：{label:'温度（摄氏度）}
}
}
};
函数drawMaterialChart（）{
var materialChart=新的google.charts.Line（chartDiv）；
var classicChart=新的google.visualization.LineChart（chartDiv）；
材料图表（数据、材料选项）；
button.innerText='更改为经典'；
button.onclick=drawClassicChart；
}
drawMaterialChart（）；
}

我希望Y轴能够在Y轴上（对于机器人Y轴）以及工具提示消息上显示未舍入的数据（现在仅显示1K值，不带小数）。工具提示消息始终显示压力值1K和温度值，不带小数的值

有人能帮我吗

谢谢

西蒙

PS：数据是从php脚本动态创建的，但现在这并不重要：）

用于格式化

数据
这将设置工具提示的格式
// 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

vAxis: {
  format: '#,##0.0'
}

还建议对材质图表使用google.charts.Line.convertOptions

请参阅以下工作片段

google.charts.load（'current'，{'packages'：['line'，'corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var chartDiv=document.getElementById（'chart_div'）；
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
数据。添加列（“数字”，“平均压力”）；
data.addColumn（'数字'，“平均温度”）；
data.addRows([
[新日期（2016年8月29日00月03日），1019.2,23.7]，
[新日期（2016年8月29日00月06日00），1019.27日23.6]，
[新日期（2016年8月29日00月09日00），1019.37日23.6]，
[新日期（2016年8月29日00月12日），1019.34日23.6]，
[新日期（2016、08、29、14、33、00）、1014.89、30.8]，
[新日期（2016、08、29、14、36、00）、1014.81、30.6]，
[新日期（2016、08、29、14、39、00）、1014.82、30.8]，
[新日期（2016、08、29、14、42、00）、1014.76、31.1]，
[新日期（2016、08、29、14、45、00）、1014.7、31]，
[新日期（2016、08、29、14、48、00）、1014.67、30.6]，
[新日期（2016、08、29、14、51、00）、1014.73、31]，
[新日期（2016、08、29、14、54、00）、1014.74、30.7]，
[新日期（2016、08、29、14、57、00）、1014.77、30.5]，
[新日期（2016、08、29、15、00、00）、1014.75、30.1]，
]);
var formatPattern='#，##0.0'；
var formatNumber=new google.visualization.NumberFormat（{pattern:formatPattern}）；
formatNumber.格式（数据，1）；
formatNumber.格式（数据，2）；
变量材料选项={
图表：{
标题：“平均压力和温度”
},
宽度：1200，
身高：600，
系列：{
0:{轴：'压力'}，
1:{轴：'温度'}
},
轴线：{
y:{
临时工：{
标签：“压力”
},
日光：{
标签：“温度（摄氏度）”
}
}
},
言辞：{
格式：formatPattern
}
};
函数drawMaterialChart（）{
var materialChart=新的google.charts.Line（chartDiv）；
materialChart.draw（数据，google.charts.Line.convertOptions（materialOptions））；
}
drawMaterialChart（）；
}
谢谢@WhiteHat，一如既往的快速，非常感谢！