向Google Candlestick圖表添加注釋

Question

我使用的是側向翻轉的Google Charts Candlestick圖表，以模擬范圍條形圖。 關於當前顯示在最左側行（TU300，TU-01，TU-10等）中的文本-我希望它也立即（或代替地）顯示在每個水平條的右側，以便它更有效地標記每個小節。

我是新手，不勝感激。 這是JSFiddle：

https://jsfiddle.net/jdscomms/xLe83g80/

  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，您可以在這里結賬 。 鑒於現在有點重復，您可能想禁用vAxis 。

Answer 2

Google的Candlestick Chart API無法為您提供直接標記燭台的方法（最大，最大/最小最小價，最小/最大最小價）。 但是，似乎有一些方法可以對條形圖執行相同的操作。
這就是他們使用setColumns在條形圖上標記條形的方式。

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

疊加層可以提供解決方法，例如很難對標簽進行硬編碼。