Question

我正在使用Google Charts烛台图表，横向翻转，以模拟范围条形图。关于当前显示在最左边的行中的文本（TU300，TU-01，TU-10等） - 我希望它也显示（或者相反）立即显示在每个水平条的右侧，以便更有效地标记每个栏。

我是新手，非常感谢您的详细帮助。这是JSFiddle：

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

  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = new google.visualization.arrayToDataTable([
      ['TU300', 438, 438, 447, 447],
      ['TU-01', null, null, null, null],
      ['TU-10', 436, 436, 445, 445],
      ['TU-12EX', 438, 438, 445, 445],
      ['TU-2', 438, 438, 445, 445],
          ['TU-3', 436, 436, 445, 445],
      ['TU-3s', 436, 436, 445, 445],
      [' TU-3w', 436, 436, 445, 445],         
      ['NS Micro', 435, 435, 445, 445],
      ['NS Micro II', 410, 410, 480, 480],
      ['Universal II ', 435, 435, 445, 445],                      
    ], true);

    var options = {
      title: 'Calibration range',
            orientation: 'vertical', // Orients this chart horizontally
                backgroundColor: '#eaeaea',
         hAxis: { 
        title: 'Hz',
        minValue: 300,
            maxValue: 600,
          gridlines: { color: '#999', count: 21 },
            minorGridlines: { color: '#e1e1e1', count: 4 },
    },

    vAxis: {
      title: 'Models',
    },

      bar: { groupWidth: '80%' }, // Space between bars
      candlestick: {
        fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
        risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
      }
    };

    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

Answer 1

您总是可以使用一些优秀的旧JavaScript和CSS手动扩展看起来不支持其api中的注释的烛台。

基本上抓住所有木棍，使用getBoundingClientRect api获取它们的位置和宽度，并将绝对div添加到你的图表中，各自的位置取决于它们注释的棒。

var bars = document.querySelectorAll('#chart_div svg > g:nth-child(5) > g')[0].lastChild.children
for (var i = 0 ; i < bars.length ; i++) {
  var bar = bars[i]
  var { top, left, width } = bar.getBoundingClientRect()
  var hint = document.createElement('div')
  hint.style.top = top + 'px'
  hint.style.left = left + width + 5 + 'px'
  hint.classList.add('hint')
  hint.innerText = rawData.filter(t => t[1])[i][0]
  document.getElementById('chart_div').append(hint)
}

我已经做了一个工作的JsFiddle，你可以checkout here。您可能想要禁用vAxis，因为它现在有点重复。

Answer 2

Google's Candlestick Chart API没有直接为您提供标记蜡烛棒（最大值，开启最小值/最大值，最小值，关闭最小值/最大值）的方法。但是，bar graphs似乎有办法做同样的事情。
这是他们用barColumns标记条形图上的条形图的方法。

var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }]);

Overlays可以提供一些解决方法，例如对标签进行硬编码时会遇到很多困难。

将注释添加到Google烛台图表

2 个答案: