javascript - Google Chart 图表外的线条

Question

我用 Google Chart 制作了一个图表。为什么我的线条在图表本身之外？请参阅此处的 JS Fiddle 解决问题:https://jsfiddle.net/n75fuh6w/

我可以解决这个问题吗？或者这就是 Google 图表的工作原理吗？非常感谢。

No code is needed here Stackoverflow

Answer 1

图表外部的线条是vAxis被锁定到仅第一个系列范围的结果

当有多个系列数据时，需要找到所有系列的min和max

我们可以使用 Math.min 和 max 来查找每个

// use null instead of zero (min could be greater than zero and wouldn't be found)
var rangeMin = null;
var rangeMax = null;

// start with column 1 (exclude x axis)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
  if (data.getColumnType(i) === 'number') {
    var range = data.getColumnRange(i);
    if (rangeMin === null) {
      rangeMin = range.min;
    } else {
      rangeMin = Math.min(rangeMin, range.min);
    }
    if (rangeMax === null) {
      rangeMax = range.max;
    } else {
      rangeMax = Math.max(rangeMax, range.max);
    }
  }
}

然后在选项中，+/- 1 以确保安全

  viewWindow: {
    min: rangeMin - 1,
    max: rangeMax + 1
  }

<小时/>

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

Date.prototype.minDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() - days);
  return dat;
}
var date = new Date();

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

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('datetime', 'Date');
  data.addColumn('number', 'Test1');
  data.addColumn('number', 'Test2');
  data.addColumn('number', 'Test3');
  data.addColumn('number', 'Test4');
  data.addColumn('number', 'Test5');
  data.addColumn('number', 'Test6');
  data.addColumn('number', 'Test7');
  data.addColumn('number', 'Test8');
  data.addColumn('number', 'Test9');
  data.addColumn('number', 'Test10');
  data.addColumn('number', 'Test11');
  data.addColumn('number', 'Test12');
  data.addRows([
    [new Date(2017, 1, 08), 1,  8, 1, 36, 7,  9,  12, 45, 20, 30, 45, 8],
    [new Date(2017, 1, 07), 12, 9, 5, 8,  10, 21, 34, 87, 89, 45, 12, 9],
  ]);

  // set range
  var rangeMin = null;
  var rangeMax = null;
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    if (data.getColumnType(i) === 'number') {
      var range = data.getColumnRange(i);
      if (rangeMin === null) {
        rangeMin = range.min;
      } else {
        rangeMin = Math.min(rangeMin, range.min);
      }
      if (rangeMax === null) {
        rangeMax = range.max;
      } else {
        rangeMax = Math.max(rangeMax, range.max);
      }
    }
  }

  var options = {
    chartArea: {'width': '100%'},
    animation: {
      duration: 1000,
      easing: 'in'
    },
    hAxis: {
      gridlines: {
      color: '#cfd1d8',
      },
      titleTextStyle: {
      color: '#3e4763',
      },
      viewWindowMode: 'explicit',
      viewWindow: {
      min: new Date(date.minDays(7)),
      max: new Date(Date.now()),
      },
    },
    vAxis: {
      gridlines: {
      count: 10,
      },
      viewWindow: {
        min: rangeMin - 1,
        max: rangeMax + 1
      }
    },
    explorer: {
      axis: 'horizontal',
      keepInBounds: false,
      maxZoomIn: 4.0
    },
    lineWidth: 3,
    pointSize: 8,
    series: {
      0: { color: '#003eff' },
      1: { color: '#118d26' },
      2: { color: '#ff00de' },
      3: { color: '#ff4fc3' },
      4: { color: '#ff0000' },
      5: { color: '#00c9cb' },
      6: { color: '#e5a200' },
      7: { color: '#00d975' },
      8: { color: '#a55f3d' },
      9: { color: '#783dc8' },
      10: { color: '#829100' },
      11: { color: '#945401' },
      },
    backgroundColor: '#f7f9f9',
    legend: { position: 'none' },
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data, options);
}

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