javascript - Google Charts X 轴显示上下值

Question

我绘制了一个 Google 折线图，当具有更多值时，它以交替上下格式显示 X 轴值，如下所示。

但我想在单行中以比当前更好的表示方式显示它，斜率表示也可以，如下所示。

我绘制图表的代码如下:

var options = {
        width: '100%',
        height: '100%',
        legend: ({ position: 'top', maxLines: 1, alignment: 'end'}),
        chartArea: { left: "8%", right: "8%", top: "10%", width: "100%", height: "75%" },
        backgroundColor: 'transparent',            
        tooltip: { textStyle: { color: 'black' }, isHtml: true },
        curveType: 'none',
    };

var chart = new google.visualization.LineChart($('Div')[0]);
chart.draw(view, options);

我必须应用任何特定选项才能使轴以所需格式显示吗？

Answer 1

参见 configuration options对于 hAxis

对于坡度表示，使用 --> slantedText: true

hAxis.slantedText - If true, draw the horizontal axis text at an angle, to help fit more text along the axis.

要强制执行一级标签，请使用 --> maxAlternation: 1

hAxis.maxAlternation - Maximum number of levels of horizontal axis text. If axis text labels become too crowded, the server might shift neighboring labels up or down in order to fit labels closer together.

要防止标签在两行中换行，请使用 --> maxTextLines: 1

maxTextLines - Maximum number of lines allowed for the text labels. Labels can span multiple lines if they are too long, and the number of lines is, by default, limited by the height of the available space.

注意:您可能需要调整 chartArea.bottom 以沿 x 轴留出更多空间...

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var dateFormat = 'dd MMM';
  var formatDate = new google.visualization.DateFormat({
    pattern: dateFormat
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'X');
  dataTable.addColumn('number', 'Value');

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2018, 9, 1);
  var endDate = new Date(2018, 9, 31);
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i <= endDate.getTime(); i = i + oneDay) {
    var rowDate = new Date(i);
    var xValue = formatDate.formatValue(rowDate);
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);
    dataTable.addRow([
      xValue,
      yValue
    ]);
  }

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

  var options = {
    width: '100%',
    height: '100%',
    legend: {
      position: 'top',
      maxLines: 1,
      alignment: 'end'
    },
    chartArea: {
      bottom: 40,
      left: '8%',
      right: '8%',
      top: '10%',
      width: '100%',
      height: '75%'
    },
    backgroundColor: 'transparent',
    tooltip: {
      textStyle: {
        color: 'black'
      },
      isHtml: true
    },
    curveType: 'none',
    hAxis: {
      slantedText: true
    }
  };

  function drawChart() {
    chart.draw(dataTable, options);
  }

  drawChart();
  window.addEventListener('resize', drawChart, false);
});

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