javascript - 谷歌条形图中更好的标签

Question

我想在我的 BarChart 中使用自定义标签，但使用 tics 强制添加线条，我希望标签位于线条之间以表示两条线之间的区域。

 options = {
    title: "- - - - - - - - Low - - - - - - - - - - - - - - - - Middle - - - - - - - - - - - - - - - - - - - - - - High - - - - - ",
    animation: {
      startup: 'true',
      easing: 'linear',
      duration: 500
    },
    height: 100,
    legend: {
      position: 'none'
    },
    hAxis: {
      maxValue: 10,
      minValue: 0,
      ticks: [{
        v: 0,
        f: ''
      }, {
        v: 3,
        f: ''
      }, {
        v: 7,
        f: ''
      }, {
        v: 10,
        f: ''
      }]

    },
    width: 700,
    tooltip: {
      trigger: 'hover'
    },
    backgroundColor: "transparent",
  };

我制作了一个 fiddle 来展示我正在寻找的功能。如果有人知道如何正确解决这个问题，我会非常高兴:

https://jsfiddle.net/zkcps3h8/2/

fiddle 代表的功能:

• 分为三个部分:低、中、高
• 用线条分隔这些部分
• 在这些列的下方或上方有标签

任何解决此问题的方法都值得赞赏。

Answer 1

没有可用于获得所需布局的标准配置选项，
但您可以在图表完成绘制后手动添加标签。

使用 ticks 为所需的部分添加行，
然后在添加标签时使用这些行作为引用，
请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart', 'controls']
}).then(function () {
  var options = {
    animation: {
      startup: 'true',
      easing: 'linear',
      duration: 500
    },
    height: 100,
    legend: {
      position: 'none'
    },
    hAxis: {
      maxValue: 10,
      minValue: 0,
      gridlines: {
        color: '#757575'
      },
      ticks: [{
        v: 0,
        f: ''
      }, {
        v: 3,
        f: ''
      }, {
        v: 7,
        f: ''
      }, {
        v: 10,
        f: ''
      }]
    },
    tooltip: {
      trigger: 'hover'
    },
    backgroundColor: 'transparent',
    chartArea: {
      backgroundColor: 'transparent',
      height: '100%',
      width: '100%',
      top: 60,
      left: 72,
      right: 24,
      bottom: 24
    },
    height: '100%',
    width: '100%'
  };

  var container = document.getElementById('s-graph');
  var data_array = $(container).data('values');
  data_array.unshift(['Something', 'Fun', {role: 'style'}]);
  var data = new google.visualization.arrayToDataTable(data_array);
  var chart = new google.visualization.BarChart(container);

  google.visualization.events.addListener(chart, 'animationfinish', function () {
    var chartElements = container.getElementsByTagName('rect');
    var chartArea = chartElements[0];
    var sectionLabels = ['Low', 'Middle', 'High'];
    var svg = container.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;

    // clone existing label for style, font
    var defaultLabel = container.getElementsByTagName('text')[0];

    var labelIndex = -1;
    var xCoordLeft = parseFloat(chartArea.getAttribute('x'));
    Array.prototype.forEach.call(chartElements, function(rect) {
      if (rect.getAttribute('fill') === options.hAxis.gridlines.color) {
        if (labelIndex > -1) {
          var xCoordRect = parseFloat(rect.getAttribute('x'));
          var xCoordLabel = ((xCoordRect - xCoordLeft) / 2) + xCoordLeft;

          // top label
          var label = defaultLabel.cloneNode(true);
          label.setAttribute('x', xCoordLabel);
          label.setAttribute('y', chartArea.getAttribute('y'));
          label.textContent = sectionLabels[labelIndex];
          svg.appendChild(label);

          // adjust for length of label
          var labelBounds = label.getBBox();
          xCoordLabel = xCoordLabel + (labelBounds.width / 2);
          label.setAttribute('x', xCoordLabel);

          // bottom label
          label = label.cloneNode(true);
          label.setAttribute('y', parseFloat(chartArea.getAttribute('height')) + parseFloat(chartArea.getAttribute('y')) + labelBounds.height);
          svg.appendChild(label);
          xCoordLeft = xCoordRect;
        }
        labelIndex++;
      }
    });
  });

  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
  chart.draw(data, options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div data-values="[[&quot;Tom&quot;, 7.2, &quot;#ed341c&quot;], [&quot;Nisse&quot;, 6.4, &quot;#16593a&quot;]]" id="s-graph"></div>

注意:使用图表方法 getImageURI 时，手动所做的更改不会显示，
如果您需要图表的图像，可以使用 html2canvas