Question

我正在使用谷歌的AreaChart，但它并没有像我喜欢的那样显示x轴。

这是我想要绘制的数据

[new Date(2017, 02,10),1,'1'],
[new Date(2017, 02,21),1,'1'],
[new Date(2017, 02,28),1,'1'],
[new Date(2017, 03,07),1,'1'],
[new Date(2017, 03,14),1,'1'],
[new Date(2017, 03,23),1,'1'],
[new Date(2017, 03,31),1,'1'],
[new Date(2017, 04,07),1,'1'],
[new Date(2017, 04,26),1,'1'],
[new Date(2017, 05,03),1,'1'],
[new Date(2017, 05,10),1,'1'],
[new Date(2017, 05,17),1,'1'],
[new Date(2017, 05,25),1,'1'],
[new Date(2017, 06,05),1,'1'],
[new Date(2017, 06,12),0.5,'0.5']

我喜欢X轴上的日期间隔

此图表的选项为

   var options = {
            legend: {position: 'top', alignment: 'start', textStyle: {fontSize: 12, bold: false}},
            width: 800,
            height: 500,
            hAxis: {showTextEvery: 0, slantedText: 'true', slantedTextAngle: 45},
            vAxis: {minValue: 0},
            colors: ['#C3D5BC'],
            trendlines: {0: {
                    labelInLegend: 'Trendline (Test)',
                    type: 'linear',
                    showR2: false,
                    visibleInLegend: true,
                    color: '#344F35'
                }}    // Draw a trendline for data series 0.
        };
var container = document.getElementById("test-div");
var chart = new google.visualization.AreaChart(container);
chart.draw(data, options);

这是我当前的输出，但我喜欢x轴上的所有日期间隔???

Answer 1

您可以使用选项提供自定义轴标签 - ＆gt; ticks

ticks应该是一个与轴类型相同的值数组，
在这种情况下'date'

ticks: [new Date(2017, 02,10), new Date(2017, 02,11), ...]

请参阅以下工作代码段...
这里，数据表方法 - ＆gt; getDistinctValues
用于根据数据构建一组唯一日期这只会显示有数据的日期

hAxis: {
  format: 'M/d/yy',
  ticks: data.getDistinctValues(0),
  ...

（还添加了format选项来更改标签的格式）

＆＃13;

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Value', {role: 'tooltip'}],
    [new Date(2017, 02,10),1,'1'],
    [new Date(2017, 02,21),1,'1'],
    [new Date(2017, 02,28),1,'1'],
    [new Date(2017, 03,07),1,'1'],
    [new Date(2017, 03,14),1,'1'],
    [new Date(2017, 03,23),1,'1'],
    [new Date(2017, 03,31),1,'1'],
    [new Date(2017, 04,07),1,'1'],
    [new Date(2017, 04,26),1,'1'],
    [new Date(2017, 05,03),1,'1'],
    [new Date(2017, 05,10),1,'1'],
    [new Date(2017, 05,17),1,'1'],
    [new Date(2017, 05,25),1,'1'],
    [new Date(2017, 06,05),1,'1'],
    [new Date(2017, 06,12),0.5,'0.5']
  ]);

  var options = {
    legend: {position: 'top', alignment: 'start', textStyle: {fontSize: 12, bold: false}},
    width: 800,
    height: 500,
    hAxis: {
      format: 'M/d/yy',
      ticks: data.getDistinctValues(0),
      slantedText: 'true',
      slantedTextAngle: 45
    },
    vAxis: {minValue: 0},
    colors: ['#C3D5BC'],
    trendlines: {0: {
      labelInLegend: 'Trendline (Test)',
      type: 'linear',
      showR2: false,
      visibleInLegend: true,
      color: '#344F35'
    }}
  };
  var container = document.getElementById('test-div');
  var chart = new google.visualization.AreaChart(container);
  chart.draw(data, options);
});

＆＃13;

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

＆＃13;

如果您想显示所有日期，是否有数据，
使用数据表方法 - ＆gt; getColumnRange
getColumnRange将从数据中返回最小和最大日期用它来构建一个包含所有日期的数组

var dateRange = data.getColumnRange(0);
var oneDay = (1000 * 60 * 60 * 24);
var ticks = [];
for (var i = dateRange.min.getTime(); i < dateRange.max.getTime(); i = i + oneDay) {
  ticks.push(new Date(i));
}

注意：图表上必须有足够的空间，
或者不会显示所有标签......

更新

对象表示法可用于代替文字值，
在数据表和其他地方，如图表选项ticks ...

对象表示法接受...的键 v: - 值
f: - 格式化值
p: - 自定义属性（未在图表上显示）

{v: new Date(2017, 1, 10), f: 'Feb 28, 17', p: {custom: 'value'}}

在数据表中使用时，
默认工具提示将显示格式化值

在ticks中使用时，轴标签将显示格式化值

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

＆＃13;

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Value'],

    // use object notation here to change the default tooltip
    [{v: new Date(2017, 1, 10), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 1, 21), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 1, 28), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 2, 7), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 2, 14), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 2, 23), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 2, 31), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 3, 7), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 3, 26), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 4, 3), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 4, 10), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 4, 17), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 4, 25), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 5, 5), f: 'Feb 28, 17'},1],
    [{v: new Date(2017, 5, 12), f: 'Feb 28, 17'},0.5]
  ]);

  var options = {
    legend: {position: 'top', alignment: 'start', textStyle: {fontSize: 12, bold: false}},
    width: 800,
    height: 500,
    hAxis: {
      format: 'M/d/yy',
      ticks: [
        // use object notation here to change the axis label
        {v: new Date(2017, 1, 10), f: 'Feb 28, 17'},
        {v: new Date(2017, 1, 21), f: 'Feb 28, 17'},
        {v: new Date(2017, 1, 28), f: 'Feb 28, 17'},
        {v: new Date(2017, 2, 7), f: 'Feb 28, 17'},
        {v: new Date(2017, 2, 14), f: 'Feb 28, 17'}
      ],
      slantedText: 'true',
      slantedTextAngle: 45
    },
    vAxis: {minValue: 0},
    colors: ['#C3D5BC'],
    trendlines: {0: {
      labelInLegend: 'Trendline (Test)',
      type: 'linear',
      showR2: false,
      visibleInLegend: true,
      color: '#344F35'
    }}
  };
  var container = document.getElementById('test-div');
  var chart = new google.visualization.AreaChart(container);
  chart.draw(data, options);
});

＆＃13;

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

＆＃13;

数据表方法 - ＆gt; getDistinctValues(colIndex)
返回一个简单数组，其中包含

列中的值

此示例中的第一列将返回日期值的数组...

[new Date(2017, 1, 10), new Date(2017, 1, 21), ...]

为了将此数组转换为对象表示法，
你可以使用map方法，或许多其他例程......

以下代码段使用数据中的日期值创建对象表示法所有具有相同格式的值

var ticks = data.getDistinctValues(0);
ticks = ticks.map(function (xDate) {
  return {
    v: xDate,
    f: 'Feb 28, 2017'
  };
});

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

＆＃13;

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Value', {role: 'tooltip'}],
    [new Date(2017, 1, 10),1,'1'],
    [new Date(2017, 1, 21),1,'1'],
    [new Date(2017, 1, 28),1,'1'],
    [new Date(2017, 2, 7),1,'1'],
    [new Date(2017, 2, 14),1,'1'],
    [new Date(2017, 2, 23),1,'1'],
    [new Date(2017, 2, 31),1,'1'],
    [new Date(2017, 3, 7),1,'1'],
    [new Date(2017, 3, 26),1,'1'],
    [new Date(2017, 4, 3),1,'1'],
    [new Date(2017, 4, 10),1,'1'],
    [new Date(2017, 4, 17),1,'1'],
    [new Date(2017, 4, 25),1,'1'],
    [new Date(2017, 5, 5),1,'1'],
    [new Date(2017, 5, 12),0.5,'0.5']
  ]);

  var ticks = data.getDistinctValues(0);
  ticks = ticks.map(function (xDate) {
    return {
      v: xDate,
      f: 'Feb 28, 2017'
    };
  });

  var options = {
    legend: {position: 'top', alignment: 'start', textStyle: {fontSize: 12, bold: false}},
    width: 800,
    height: 500,
    hAxis: {
      format: 'M/d/yy',
      ticks: ticks,
      slantedText: 'true',
      slantedTextAngle: 45
    },
    vAxis: {minValue: 0},
    colors: ['#C3D5BC'],
    trendlines: {0: {
      labelInLegend: 'Trendline (Test)',
      type: 'linear',
      showR2: false,
      visibleInLegend: true,
      color: '#344F35'
    }}
  };
  var container = document.getElementById('test-div');
  var chart = new google.visualization.AreaChart(container);
  chart.draw(data, options);
});

＆＃13;

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

＆＃13;

Google Areachart仅显示x轴上的几个月，而不是所有日期间隔

1 个答案: