向Google燭臺圖表添加註釋

我正在使用Google圖表燭臺圖表（側向翻轉）來模擬範圍條形圖。關於當前顯示在最左邊的行（TU300，TU-01，TU-10等）中的文本 - 我希望它也可以立即顯示在每個單槓的右側，以便更有效地標記每個欄。向Google燭臺圖表添加註釋

我是一個新手，並希望得到詳細的幫助。這裏的的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); 
    }

來源

2016-05-30 jdscomms

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可以提供一種解決像硬編碼的標籤與難度大比特。

來源

2017-04-26 18:40:40

你總是可以手動擴展那些似乎不支持在api中使用一些好的JavaScript和CSS的註釋的燭臺。

基本上抓住所有的棍棒，使用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，因爲它現在有點重複。

來源

2017-04-29 23:39:33

向Google燭臺圖表添加註釋

回答

相關問題