Question

我绘制了一个Google折线图，当具有更多值时，该X轴值以交替向下的格式显示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-如果为true，则以一定角度绘制水平轴文本，以帮助沿轴放置更多文本。

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

hAxis.maxAlternation-水平轴文本的最大级别数。如果轴文本标签变得太拥挤，则服务器可能会向上或向下移动相邻标签，以使标签更靠近在一起。

要使标签不缠绕在两行上，请使用-> maxTextLines: 1

maxTextLines-文本标签允许的最大行数。如果标签太长，则标签可以跨越多行，默认情况下，行数受可用空间的高度限制。

注意：您可能需要调整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>

Google Charts X轴显示向下的值

1 个答案: