Добавление аннотаций на график Google Candlestick

Question

Я использую график свечей Google Charts, перевернутый вбок, чтобы эмулировать линейчатую диаграмму диапазона. Что касается текста, который в данный момент отображается в крайнем левом ряду (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

Вы всегда можете вручную расширить подсвечник, который, кажется, не поддерживает аннотации в их API с некоторыми старыми добрыми JavaScript и CSS.

Соберите все палочки, определите их положение и ширину с помощью API getBoundingClientRect и добавьте абсолютные дивы к диаграмме с соответствующими позициями в зависимости от пометки, которую они комментируют.

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" }]);

Наложения могут дать обходной путь, например, жесткое кодирование ваших этикеток с большим трудом.