季度日期中的 Google 可视化组合图显示太多 hAxis 标签

问题描述 投票：0回答：1

如何消除 hAxis 上的冗余标签？
我的数据集有 8 个代表过去 8 个季度的月初日期。我收到了很多无法删除的额外 hAxis 标签。我尝试过使用网格线设置，但未能清理图表。我的目标是每个栏一个标签。

有人可以指出我正确的方向吗？
一如既往地感谢您的帮助！

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

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time of Day');
  data.addColumn('number', 'Rating');
  data.addColumn('number', 'Goal');

  data.addRows([
    [new Date(2023, 0, 1), 5, 6],
    [new Date(2023, 3, 1), 7, 6],
    [new Date(2023, 6, 1), 3, 6],
    [new Date(2023, 9, 1), 1, 6],
    [new Date(2024, 0, 1), 5, 6],
    [new Date(2024, 3, 1), 7, 6],
    [new Date(2024, 6, 1), 3, 6],
    [new Date(2024, 9, 1), 1, 6],
  ]);


  var options = {
    title: 'Rate the Day on a Scale of 1 to 10',
    height: 400,
    hAxis: {
      slantedText: true,
      slantedTextAngle: 90,
      type: "discrete",
      format: 'yyyy-QQ',
      //gridlines: { count: -1 },
      //minorGridlines: {count: 0},
    },
    vAxis: {
      minValue: 0
    },
    seriesType: 'bars',
    series: {
      1: {
        type: 'line'
      }
    },
    trendlines: {
      0: {
        type: "linear"
      }
    },

  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

  chart.draw(data, options);

}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>

javascript charts google-visualization
1个回答
0
投票

问题是由于 x 轴是连续轴（日期）
图表沿 x 轴显示不同的日期，
但是，日期的格式会导致显示重复的标签。

有几种方法可以解决...

1) 为 x 轴提供自定义刻度，以每条显示一个标签

2）将日期列转换为字符串，从而产生离散轴

以下是两者的示例...

1) 为 x 轴提供自定义刻度，以每条显示一个标签

ticks
配置选项采用一组值，
其数据类型必须与轴（日期）相同

因此，构建第一个数据表列中的值的数组

// build x-axis ticks
var xAxisTicks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  xAxisTicks.push(data.getValue(i, 0));
}

然后在

hAxis
选项中使用这些勾号

hAxis: {
  slantedText: true,
  slantedTextAngle: 90,
  type: 'discrete',
  format: 'yyyy-QQ',
  ticks: xAxisTicks  // <-- include custom ticks
},

请参阅以下工作片段...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Time of Day');
  data.addColumn('number', 'Rating');
  data.addColumn('number', 'Goal');

  data.addRows([
    [new Date(2023, 0, 1), 5, 6],
    [new Date(2023, 3, 1), 7, 6],
    [new Date(2023, 6, 1), 3, 6],
    [new Date(2023, 9, 1), 1, 6],
    [new Date(2024, 0, 1), 5, 6],
    [new Date(2024, 3, 1), 7, 6],
    [new Date(2024, 6, 1), 3, 6],
    [new Date(2024, 9, 1), 1, 6],
  ]);

  // build x-axis ticks
  var xAxisTicks = [];
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    xAxisTicks.push(data.getValue(i, 0));
  }

  var options = {
    title: 'Rate the Day on a Scale of 1 to 10',
    height: 400,
    hAxis: {
      slantedText: true,
      slantedTextAngle: 90,
      format: 'yyyy-QQ',
      ticks: xAxisTicks  // <-- include custom ticks
    },
    vAxis: {
      minValue: 0
    },
    seriesType: 'bars',
    series: {
      1: {
        type: 'line'
      }
    },
    trendlines: {
      0: {
        type: 'linear'
      }
    },
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>

2）将日期列转换为字符串，从而产生离散轴

首先将数据表第一列的数据类型改为string

data.addColumn('string', 'Time of Day');  // <-- change to string

接下来，我们需要一个日期格式化程序来将日期转换为所需的格式

// create date formatter to convert x-axis values to string
var formatDate = new google.visualization.DateFormat({
  pattern: 'yyyy-QQ'
});

然后，我们将数据保存在一个单独的变量中，并将日期转换为字符串，然后再将行添加到数据表

// hold raw data in a variable
var dataRaw = [
  [new Date(2023, 0, 1), 5, 6],
  [new Date(2023, 3, 1), 7, 6],
  [new Date(2023, 6, 1), 3, 6],
  [new Date(2023, 9, 1), 1, 6],
  [new Date(2024, 0, 1), 5, 6],
  [new Date(2024, 3, 1), 7, 6],
  [new Date(2024, 6, 1), 3, 6],
  [new Date(2024, 9, 1), 1, 6],
];

// convert date to formatted string
dataRaw = dataRaw.map(function (row) {
  row[0] = formatDate.formatValue(row[0]);
  return row;
});

// add converted data to data table
data.addRows(dataRaw);

请参阅以下工作片段...

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Time of Day');  // <-- change to string
  data.addColumn('number', 'Rating');
  data.addColumn('number', 'Goal');

  // create date formatter to convert x-axis values to string
  var formatDate = new google.visualization.DateFormat({
    pattern: 'yyyy-QQ'
  });

  // hold raw data in a variable
  var dataRaw = [
    [new Date(2023, 0, 1), 5, 6],
    [new Date(2023, 3, 1), 7, 6],
    [new Date(2023, 6, 1), 3, 6],
    [new Date(2023, 9, 1), 1, 6],
    [new Date(2024, 0, 1), 5, 6],
    [new Date(2024, 3, 1), 7, 6],
    [new Date(2024, 6, 1), 3, 6],
    [new Date(2024, 9, 1), 1, 6],
  ];

  // convert date to formatted string
  dataRaw = dataRaw.map(function (row) {
    row[0] = formatDate.formatValue(row[0]);
    return row;
  });

  // add converted data to data table
  data.addRows(dataRaw);

  var options = {
    title: 'Rate the Day on a Scale of 1 to 10',
    height: 400,
    hAxis: {
      slantedText: true,
      slantedTextAngle: 90
    },
    vAxis: {
      minValue: 0
    },
    seriesType: 'bars',
    series: {
      1: {
        type: 'line'
      }
    },
    trendlines: {
      0: {
        type: 'linear'
      }
    },
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<div id="chart_div"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.