个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 21:16:31 25 4
gpt4 key购买 nike

我想格式化我的谷歌双 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>

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

有人可以帮我吗？

谢谢!

西蒙

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

最佳答案

使用NumberFormat格式化数据

这将设置工具提示的格式...

// 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 与 Material 图表一起使用

请参阅以下工作片段...

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>

关于javascript - Google Charts 双 Y 轴线上的 Y 轴格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39208271/

25 4 0
文章推荐： mysql - Amazon AWS RDS MySQL 数据库可以在 Azure 中使用吗？
文章推荐： android - 具有访问 token 的扩展权限有效性的 Facebook session
文章推荐： android - 如何在android中的特定日期触发闹钟
文章推荐： mysql - 连接多个表并使用 MySQL 的 Count
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com