Question

我正在尝试使用Google素材设计创建折线图。图表正确显示但是，我想更改图表上显示的日期格式。

我只想要＆＃34;月，年＆＃34; （例如1994年6月）格式而不是当前格式，即＆＃34;月/日/年时间：秒＆＃ 34;我怎么做？

另外，我想增加线条的宽度。＆＃34;线宽＆＃34;选项也无效。

如何增加折线图的宽度？另外，如何控制x轴上的标签数量？

图表的代码如下所示。

＆＃13;

google.charts.load('current', {
  'packages': ['line']
});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Year');
  data.addColumn('number', 'DataSize');
  data.addRows(22);
  data.setValue(0, 0, new Date('1994-01-01'));
  data.setValue(0, 1, 25506);
  data.setValue(1, 0, new Date('1994-02-01'));
  data.setValue(1, 1, 26819);
  data.setValue(2, 0, new Date('1994-03-01'));
  data.setValue(2, 1, 31685);
  data.setValue(3, 0, new Date('1994-04-01'));
  data.setValue(3, 1, 25611);
  data.setValue(4, 0, new Date('1994-05-01'));
  data.setValue(4, 1, 29976);
  data.setValue(5, 0, new Date('1994-06-01'));
  data.setValue(5, 1, 32590);
  data.setValue(6, 0, new Date('1994-07-01'));
  data.setValue(6, 1, 33309);
  data.setValue(7, 0, new Date('1994-08-01'));
  data.setValue(7, 1, 35825);
  data.setValue(8, 0, new Date('1994-09-01'));
  data.setValue(8, 1, 41973);
  data.setValue(9, 0, new Date('1994-10-01'));
  data.setValue(9, 1, 54067);
  data.setValue(10, 0, new Date('1994-11-01'));
  data.setValue(10, 1, 45895);
  var formatter_medium = new google.visualization.DateFormat({
    formatType: 'medium'
  });
  formatter_medium.format(data, 1);
  var chart = new google.charts.Line(document.getElementById('dvRise'));
  chart.draw(data, {
    lineWidth: '3',
    left: 0,
    top: 0,
    'height': '300',
    'width': '450',
    colors: ['#44AFED'],
    legend: {
      position: 'none'
    },
    hAxis: {}
  });
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div style="text-align: center; height: 320px" id="dvRise"></div>

＆＃13;

Answer 1

至于日期格式，可以在hAxis上设置，也可以更改悬停值。
无需formatter ...

至于lineWidth，该选项似乎不适用于物料图表，即使是...

google.charts.Line.convertOptions

google.charts.load('current', {
  'packages': ['line']
});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Year');
  data.addColumn('number', 'DataSize');
  data.addRows(22);
  data.setValue(0, 0, new Date('1994-01-01'));
  data.setValue(0, 1, 25506);
  data.setValue(1, 0, new Date('1994-02-01'));
  data.setValue(1, 1, 26819);
  data.setValue(2, 0, new Date('1994-03-01'));
  data.setValue(2, 1, 31685);
  data.setValue(3, 0, new Date('1994-04-01'));
  data.setValue(3, 1, 25611);
  data.setValue(4, 0, new Date('1994-05-01'));
  data.setValue(4, 1, 29976);
  data.setValue(5, 0, new Date('1994-06-01'));
  data.setValue(5, 1, 32590);
  data.setValue(6, 0, new Date('1994-07-01'));
  data.setValue(6, 1, 33309);
  data.setValue(7, 0, new Date('1994-08-01'));
  data.setValue(7, 1, 35825);
  data.setValue(8, 0, new Date('1994-09-01'));
  data.setValue(8, 1, 41973);
  data.setValue(9, 0, new Date('1994-10-01'));
  data.setValue(9, 1, 54067);
  data.setValue(10, 0, new Date('1994-11-01'));
  data.setValue(10, 1, 45895);

  var chart = new google.charts.Line(document.getElementById('dvRise'));
  chart.draw(data, google.charts.Line.convertOptions({
    lineWidth: 10,
    left: 0,
    top: 0,
    'height': '300',
    'width': '450',
    colors: ['#44AFED'],
    legend: {
      position: 'none'
    },
    hAxis: {format: 'MMM, yyyy'}
  }));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div style="text-align: center; height: 320px" id="dvRise"></div>

Answer 2

试试这个..

var date_formatter = new google.visualization.DateFormat({ 
        pattern: "MMM dd, yyyy"
}); 
date_formatter.format(data_table, 0);

Answer 3

您可以在绘制图表时使用hAxis选项设置格式

离

// If the format option matches, change it to the new option,
          // if not, reset it to the original format.
          options.hAxis.format === 'M/d/yy' ?
          options.hAxis.format = 'MMM dd, yyyy' :
          options.hAxis.format = 'M/d/yy';

          chart.draw(data, options);

工作示例https://jsfiddle.net/api/post/library/pure/

Answer 4

试试这个

function convertDate(inputFormat) {
    function pad(s) { return (s < 10) ? '0' + s : s; }
    var d = new Date(inputFormat);
    return [pad(d.getDate()),pad(d.getMonth()+1),d.getFullYear()].join('/');
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Year');
data.addColumn('number', 'DataSize');
data.addRows(22);
data.setValue(0, 0, convertDate('1994-01-01'));
data.setValue(0, 1, 25506);
data.setValue(1, 0, convertDate('1994-02-01'));
data.setValue(1, 1, 26819);
data.setValue(2, 0, convertDate('1994-03-01'));
data.setValue(2, 1, 31685);
data.setValue(3, 0, convertDate('1994-04-01'));
data.setValue(3, 1, 25611);
data.setValue(4, 0, convertDate('1994-05-01'));
data.setValue(4, 1, 29976);
data.setValue(5, 0, convertDate('1994-06-01'));
data.setValue(5, 1, 32590);
data.setValue(6, 0, convertDate('1994-07-01'));
data.setValue(6, 1, 33309);
data.setValue(7, 0, convertDate('1994-08-01'));
data.setValue(7, 1, 35825);
data.setValue(8, 0, convertDate('1994-09-01'));
data.setValue(8, 1, 41973);
data.setValue(9, 0, convertDate('1994-10-01'));
data.setValue(9, 1, 54067);
data.setValue(10, 0, convertDate('1994-11-01'));
data.setValue(10, 1, 45895);
var formatter_medium = new google.visualization.DateFormat({
formatType: 'medium'
});

在转换日期功能中，您可以根据需要在输出中更改日期格式

如何更改Google素材设计折线图中的日期格式？

4 个答案: