Question

我制作了一个简单的图形，您可以在其中进行缩放和拖动。问题是，当你向左或向右移动时，点/线会改变它们的位置。

这是一个显示问题的jsfiddle：JS Fiddle。

我能解决这个问题，还是Google图表的工作原理？非常感谢！

no is code needed here Stackoverflow

Answer 1

您可以通过锁定垂直轴来最小化，类似于水平

vAxis.viewWindow.min＆amp; max

  viewWindow: {
    min: range.min,
    max: range.max
  }

使用方法 - ＆gt; data.getColumnRange(colIndex) - 获取range

var range = data.getColumnRange(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 = google.visualization.arrayToDataTable([
    ['Year', 'TEST'],
    [new Date(2017, 1, 08), 26],
    [new Date(2017, 1, 07), 16],
    [new Date(2017, 1, 01), 30],
    [new Date(2017, 0, 27), 90],
    [new Date(2017, 0, 25), 60],
    [new Date(2017, 0, 24), 10],
    [new Date(2017, 0, 23), 30]
  ]);
  var range = data.getColumnRange(1);
  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: range.min,
        max: range.max
      }
    },
    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>

谷歌图表 - 点/线在变焦时改变位置

1 个答案: