将注释添加到Google烛台图表 [英] Adding annotations to Google Candlestick chart

问题描述

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

I'm using a Google Charts Candlestick chart, flipped sideways, to emulate a range bar chart. Regarding the text that is currently displayed in the rows at the far left (TU300, TU-01, TU-10, etc.) -- I'd like it display also (or, instead) immediately to the right of each horizontal bar, so that it labels each bar more effectively.

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

I'm a novice, and would appreciate detailed help. Here's the 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);
  }

推荐答案

您可以随时手动扩展烛台似乎不支持api中带有一些旧的JavaScript和CSS的注释。

You can always extend manually the candlestick that doesn't seem to support annotations in their api with some good old JavaScript and CSS.

基本上抓住所有的棍子，使用 getBoundingClientRect api，并将绝对div附加到你的图表中各个位置取决于他们注释的棒。

Basically grab all the sticks, get their position and width using the getBoundingClientRect api, and append absolute divs to your chart with their respective positions depending on the stick they are annotating.

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 ，因为它现在有点重复。

I've made a working JsFiddle you can checkout here. You might want to disable your vAxis given it's a bit repetitive now.

这篇关于将注释添加到Google烛台图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！