javascript - Google 折线图 - 当没有数据传递时，vAxis 线显示在中间

Question

这是我的代码

var data = new google.visualization.DataTable(
  {
    cols: [{ label: 'week', type: 'number' },
    { label: 'Completion', type: 'number' },
    { type: 'string', role: 'tooltip' }],
    rows: progressList
  }
);
    
var options = {
  width: 400,
  height: 265,
  hAxis: {
    title: 'Week',
    titleTextStyle: { fontSize: 12 },
    'margin-top': '20'
  },
  chartArea: { 'width': '82%', 'height': '75%' },
  pointSize: 5,
  legend: 'none',
  tooltip: { showColorCode: true },
  vAxis: { 
    title: 'Completion %',
    titleTextStyle: { fontSize: 12 },
    ticks: [0, 20, 40, 60, 80, 100] 
  }
};

 chart.draw(data, options);

这就是当空数组 [] 传入图表时我的图表的外观。

有办法将 Vaxis 线向左移动吗？

Answer 1

设置选项 --> hAxis.viewWindow.min

hAxis: {
  viewWindow: {
    min: 0
  }
},

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

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

function drawChart() {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'week', type: 'number'},
      {label: 'Completion', type: 'number'},
      {type: 'string', role: 'tooltip'}
    ],
    rows: [
    ]
  });

  var options = {
    width: 400,
    height: 265,
    hAxis: {
      title: 'Week',
      titleTextStyle: {
        fontSize: 12
      },
      viewWindow: {
        min: 0
      }
    },
    chartArea: {
      width: '82%',
      height: '75%'
    },
    pointSize: 5,
    legend: 'none',
    tooltip: {
      showColorCode: true
    },
    vAxis: {
      title: 'Completion %',
      titleTextStyle: {
        fontSize: 12
      },
      ticks: [0, 20, 40, 60, 80, 100]
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

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