Google Charts 双 Y 轴线上的 Y 轴格式

Question

I would like to format the Y Axis of my google Dual Y Axis Line Chart.我想格式化我的谷歌双 Y 轴折线图的 Y 轴。 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>

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.我希望 Y 轴能够在 Y 轴（对于机器人 Y 轴）以及工具提示消息上显示未舍入的数据（现在它只显示 1K 值而不是小数点）。 The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...工具提示消息始终显示在压力值 1K 和温度值上，不带小数点的值...

Could someone help me?有人可以帮助我吗？

Thanks!谢谢！

Simon西蒙

PS: The data is created dynamically from a php script, but thats not important now :) PS：数据是从 php 脚本动态创建的，但现在这不重要:)

Answer 1

use NumberFormat to format the data使用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);

to format both y-axis', add this to materialOptions ...要格式化两个 y 轴，请将其添加到materialOptions ...

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

also recommend using google.charts.Line.convertOptions with Material charts还建议将google.charts.Line.convertOptions与Material图表一起使用

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 轴格式

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-08-29 14:21:45

Google Charts 双 Y 轴线上的 Y 轴格式

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-08-29 14:21:45

解决方案1
3 已采纳 2016-08-29 14:21:45