如何解决 Google Visualization - Materials Line 中的重叠问题

Question

看起来当两个不同字段的值相同时，您只能在顶部看到最新的。

有没有办法解决重叠问题，以便我们可以看到属于该值的每个字段？

此处示例 -

google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var userArray = [
    'x',
    'a',
    'b',
    'c',
    'd',
    'e',
    'f',
    'g',
    'h',
    'i',
    'k'
  ];

  var data = new google.visualization.DataTable();

  for (var i = 0; i < userArray.length ; i++) {
      data.addColumn('number', userArray[i]);
  }


  data.addRows([
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  
        [1, 0, 1, 0, 0, 1, 2, 0, 1, 0, 0],
        [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      ]);


  var options = {
    width: 1000,
    height: 563,
    hAxis: {
      title: 'Date'
    },
    vAxis: {
      title: 'item'
    },
    series: {
      1: {
        curveType: 'function'
      }
    }
  };
  var chart = new google.charts.Line(document.getElementById('ex2'));
  chart.draw(data, google.charts.Line.convertOptions(options));
}

"b"、"e" 和 "h" 的字段都具有 "y" 值“1”，但只有 "h" 可见图表，不知道这一点的用户可能不知道 "b" 和 "e" 也有一个 "y" 值“1”，我如何解释这种重叠？

http://jsfiddle.net/6hzc5wmt/

Answer 1

解决这个问题的方法是使用focusTarget: 'category'Google dev docs

的特殊option

但是，在代码的材料版本上似乎也存在此设置的错误（错误 http://jsfiddle.net/6hzc5wmt/3/ 的 fiddle 这实际上不是bug，这是一个尚未实现的功能)。我不得不使用经典版折线图：

google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var userArray = [
    'x',
    'a',
    'b',
    'c',
    'd',
    'e',
    'f',
    'g',
    'h',
    'i',
    'k'
  ];

  var data = new google.visualization.DataTable();

  for (var i = 0; i < userArray.length ; i++) {
      data.addColumn('number', userArray[i]);
  }


  data.addRows([
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],  
        [1, 0, 1, 0, 0, 1, 2, 0, 1, 0, 0],
        [2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      ]);


  var options = {
    focusTarget: 'category',
    width: 1000,
    height: 563,
    hAxis: {
      title: 'Date'
    },
    vAxis: {
      title: 'item'
    },
    series: {
      1: {
        curveType: 'function'
      }
    }
  };
  var chart = new google.visualization.LineChart(document.getElementById('ex2'));
  chart.draw(data, options);
}

http://jsfiddle.net/6hzc5wmt/1/

如何解决 Google Visualization - Materials Line 中的重叠问题

How to fix overlap issue in Google Visualization - Materials Line

javascript

google-visualization