首页 > 编程语言> 文章详细

JavaScript-如何格式化折线图Google图表材料上的轴？

2019-10-12 20:36:00 阅读：207 来源： 互联网

标签：javascript charts google-visualization

我在格式化材料图表的轴时遇到问题.

如果我想用美元符号格式化垂直轴,请使用“经典”折线图,我会
{vAxes：{0：{title：’Amount’,格式：’$#,##’}}}
使它看起来像：

在阅读了物料图表中存在的少量文档之后,我本以为可以更改为{axes：{y：{Amount：{format：’$#,##’,label：’Amount’}}}}},但是这根本没有用.

另外,我在水平轴上有日期,默认格式为sh * t！我也不知道如何覆盖这种格式.请注意,这是我尝试格式化的轴.

在水平方向上,我尝试设置hAxis：{format：’YYYY-MM-DD’},但是没有用.

我的主要问题是：是否有人知道材料图表的完整文档？我一直在使用的是this.

第二个问题：如何格式化轴上的值？

解决方法:

这些选项在材料图上根本不可用…

看到-> Tracking Issue for Material Chart Feature Parity #2143

当使用核心图表时,有一个选项可以使图表“接近”物料图表…

theme: 'material'

请参阅以下工作片段…

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date','Date');
  data.addColumn('number','Value');
  data.addRows([
    [new Date(2017, 1, 12), 250],
    [new Date(2017, 1, 13), 200],
    [new Date(2017, 1, 14), 150]
  ]);

  var options = {
    hAxis: {
      format: 'yyyy-MM-dd'
    },
    theme: 'material',
    vAxis: {
      format: '$#,##',
      title: 'Amount'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

标签：javascript,charts,google-visualization
来源： https://codeday.me/bug/20191012/1902879.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript-如何格式化折线图Google图表材料上的轴？