javascript - 在Google BarChart中更好地标记

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

 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",
  };

我摆弄了我正在寻找的功能。如果有人知道如何正确解决这个问题，我将非常高兴：

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

小提琴代表的功能：


具有以下三个部分：低，中，高
用线将这些部分划分
在这些列下方或上方有标签


解决该问题的任何方法均受到赞赏。

最佳答案

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

使用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

关于javascript - 在Google BarChart中更好地标记，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50255471/