如何在折线图谷歌图表材料上格式化轴

如何在折线图谷歌图表材料上格式化轴

本文介绍了如何在折线图谷歌图表材料上格式化轴?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm having problems formatting the axes of material charts.

如果我想用美元符号格式化垂直轴,请使用经典折线图,我会做
{vAxes:{0:{title:'Amount',格式:'$#,##'}}}
制作它看起来像这样:

Using "classic" line chart if I would like to format my vertical axis with a dollar sign, I would do{vAxes: { 0: {title: 'Amount',format: '$#,##'}}}Making it look like so:

我以为我可以改为 {axes: {y:{金额:{格式:'$#,##',标签:'金额'}}}} 在阅读了材料图表的小文档后,但这不起作用

I would've thought I could change to {axes: {y: {Amount: {format:'$#,##', label:'Amount'} } } } after reading what little docs exist for the material charts, but this didn't work at all.

另外,我在横轴上有日期,默认格式为sh * t!我无法弄清楚如何覆盖这种格式。请注意,这是我自己想要格式化的轴。

Also, I have date on the horizontal axis, and the default formatting is sh*t! I can't figure out how to override that formatting either. Note this is on the axis it self I'm trying to format.

水平我尝试设置 hAxis:{format:'YYYY- MM-DD'} 但这不起作用。

With the horizontal I tried setting hAxis: {format:'YYYY-MM-DD'} but that didn't work.

我的主要问题是:有没有人知道材料的完整文档图表?我一直在使用的是。

My main question would be: Does anyone know of a complete documentation of the material charts? The one I've been using is this.

第二个问题:如何格式化轴上的值?

Second question: How do I format the values on the axes?

推荐答案

这些选项根本不适用于材料图表...

the options simply are not available on Material charts...

请参阅 - >

当使用 Core 图表时,有一个选项可以使图表接近材料图表...

when using a Core chart instead, there is an option that will get the chart "close" to Material chart...

theme: 'material'

请参阅以下工作代码段...

see following working snippet...

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>

这篇关于如何在折线图谷歌图表材料上格式化轴?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 03:02