向 Google 烛台图添加注释答案

【问题标题】：Adding annotations to Google Candlestick chart向 Google 烛台图添加注释
【发布时间】：2016-05-30 23:52:36
【问题描述】：

我正在使用横向翻转的 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);
  }

【问题讨论】：

标签： javascript annotations candlestick-chart

【解决方案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，因为它现在有点重复。

【讨论】：

【解决方案2】：

Google's Candlestick Chart API 不提供直接标记烛台的方法（最大值、开盘最小值/最大值、最小值、收盘最小值/最大值）。然而，似乎有办法对bar graphs 做同样的事情。
这就是他们使用 setColumns 在条形图上标记条形的方式。

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

Overlays 可以提供一种解决方法，例如对标签进行硬编码，但难度很大。

【讨论】：