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

时间：2018-02-06 19:10:52

标签： charts google-visualization

我正在使用谷歌的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轴上的所有日期间隔???

x-axis is not good

1 个答案:

答案 0 :(得分：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;
＆＃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;
＆＃13;
＆＃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;
＆＃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;
＆＃13;
＆＃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;
＆＃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;
＆＃13;
＆＃13;

相关问题
最新问题