Question

我一定会为我的一个项目使用Google图表。我需要的是显示一个条形图，在条形图中与每个条形相交的线表示另一个值。如果您查看下面的jsfiddle，您会注意到折线图仅与中间的条形图相交，并继续向其他条形图前进。

例如，如果您查看“ Apples”，则该行与整个条形图（从开始到结束）在y = 2.5处相交并在条形图内结束，而不是留在空白处，也不会进入其他酒吧。

有人可以帮助我吗（仅使用Google图表。）

我已经很累了要在每个数据行之后注入空值，这至少将行从空格中删除。但是，现在栏的中心只有一个点。寻找一种将其扩展到整个条形宽度的方法。

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

        function drawVisualization() {
    // Some raw data (not necessarily accurate)
 var data = google.visualization.arrayToDataTable([
           ['Fruit', 'Jane', 'Average'],
           ['Apples', 3, 2.5],
           ['Oranges', 2, 1.5],
           ['Pears', 4, 3],
           ['Bananas', 3, 2],
           ['Plums', 4, 3]      
        ]);

        // Set chart options
        var options = {
           title : 'Fruits distribution',
           vAxis: {title: 'Fruits'},
           hAxis: {title: 'Person'},
           seriesType: 'bars',
           series: {1:{type: 'line'}}
        };

        // Instantiate and draw the chart.
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
  }

从头到尾似乎都没有一行包含在栏中

Answer 1

无法使用标准方法/选项，
但是我们可以在图表的ready事件上绘制自定义线。

在行之间添加空值以换行。

 ['Fruit', 'Jane', 'Average'],
 ['Apples', 3, 2.5],
 [null, null, null],
 ['Oranges', 2, 1.5],
 [null, null, null],

我们可以使用以下选项将条形图拉近。

bar: {
  groupWidth: '95%'
},

然后我们可以使用圆圈放置自定义线。
我们可以使用图表的布局界面来找到条形的宽度。

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
     ['Fruit', 'Jane', 'Average'],
     ['Apples', 3, 2.5],
     [null, null, null],
     ['Oranges', 2, 1.5],
     [null, null, null],
     ['Pears', 4, 3],
     [null, null, null],
     ['Bananas', 3, 2],
     [null, null, null],
     ['Plums', 4, 3]
  ]);

  var options = {
    bar: {
      groupWidth: '95%'
    },
    title : 'Fruits distribution',
    vAxis: {title: 'Fruits'},
    hAxis: {title: 'Person'},
    seriesType: 'bars',
    series: {1:{type: 'line'}}
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ComboChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    // get chart layout and svg
    var chartLayout = chart.getChartLayoutInterface();
    var svg = document.querySelector('#chart_div svg');
    var svgNS = svg.namespaceURI;

    // process each circle
    Array.prototype.forEach.call(container.getElementsByTagName('circle'), function(circle, index) {
      // find width of the bar
      var bounds = chartLayout.getBoundingBox('bar#0#' + (index * 2));

      // create line
      var line = document.createElementNS(svgNS, 'rect');
      line.setAttribute('x', parseFloat(circle.getAttribute('cx')) - (bounds.width / 2));
      line.setAttribute('y', parseFloat(circle.getAttribute('cy')));
      line.setAttribute('width', bounds.width);
      line.setAttribute('height', 1);
      line.setAttribute('stroke', circle.getAttribute('fill'));
      line.setAttribute('stroke-width', 2);
      line.setAttribute('fill', circle.getAttribute('fill'));
      circle.parentNode.appendChild(line);
    });
  });

  chart.draw(data, options);
});

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

在Google条形图上绘制直线（组合）

1 个答案: