javascript - 如何解决 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 的特殊选项

但是，代码的 Material 版本上的此设置似乎也存在错误(错误的 fiddle http://jsfiddle.net/6hzc5wmt/3/ 这并不是真正的错误，而是尚未实现的功能)。我不得不使用经典版本折线图:

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/