Adding annotations to Google Candlestick chart

问题

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.

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

回答1:

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

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)
}

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

回答2:

Google's Candlestick Chart API doesn't give you ways to label the candle sticks (max, opening min/max, min, closing min/max) directly. There seem to be ways to do the same for bar graphs, however.
This is how they label the bars on bar graphs with setColumns.

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

Overlays can provide a work around like hard-coding your labels with a great bit of difficulty.

来源：https://stackoverflow.com/questions/37534909/adding-annotations-to-google-candlestick-chart

标签

javascript

annotations

candlestick-chart