Google Charts - 圖例和工具提示標籤

我對Google圖表和標籤自定義有疑問。Google Charts - 圖例和工具提示標籤

我正在使用組合圖表，請注意，我只能編輯它的選項，因爲數據是由我無法訪問的部分代碼構建的。

我想要做的就是在圖例和工具提示上顯示懸停時通過編輯圖表選項來更改系列標籤。

我發現該系列有一個名爲labelInLegend的屬性，它允許我編輯圖例中顯示的標籤，但工具提示內的標籤也不會更改。有沒有辦法通過改變選項或以某種方式實現它，但在繪製圖表之後？

檢查這個Fiddle看看這個問題（ORIGINAL_LABEL是原來的系列名稱，我想換MY_LABEL在這兩個傳說和工具提示）

//Series initialization: I CAN'T CHANGE THIS CODE! 
google.visualization.arrayToDataTable([ 
    ['Month', 'ORIGINAL_LABEL'] 
]); 

//Options initialization: I CAN MODIFY THIS CODE 
var options = { 
    series: { 
    0:{ labelInLegend: "MY_LABEL"} 
    } 
};

來源

2016-11-30 Luca De Nardi

一個選項是使用一個數據視圖添加計算列
和setColumns方法來改變標籤

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: drawVisualization, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawVisualization() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Month', 'ORIGINAL_LABEL'], 
 
    ['2004/05', 165], 
 
    ['2005/06', 135], 
 
    ['2006/07', 157], 
 
    ['2007/08', 139], 
 
    ['2008/09', 136] 
 
    ]); 
 

 
    var options = { 
 
    seriesType: 'bars' 
 
    }; 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, { 
 
    calc: function (dt, r) { 
 
     return dt.getValue(r, 1); 
 
    }, 
 
    type: data.getColumnType(1), 
 
    label: 'MY_LABEL' 
 
    }]); 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    chart.draw(view, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div" style="width: 900px; height: 500px;"></div>

另一種選擇包括使用HTML工具提示

tooltip: { 
     isHtml: true 
    }

，並使用MutationObserver查找並替換文本它

然而，工具提示的大小揭去由於大小的標籤
可能需要進一步定製

見下面的工作片段...

google.charts.load('current', { 
 
    callback: drawVisualization, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawVisualization() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Month', 'ORIGINAL_LABEL'], 
 
    ['2004/05', 165], 
 
    ['2005/06', 135], 
 
    ['2006/07', 157], 
 
    ['2007/08', 139], 
 
    ['2008/09', 136] 
 
    ]); 
 

 
    var options = { 
 
    seriesType: 'bars', 
 
    tooltip: { 
 
     isHtml: true 
 
    } 
 
    }; 
 

 
    var chartDiv = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ComboChart(chartDiv); 
 

 
    var observer = new MutationObserver(function (mutations) { 
 
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('span'), function (span) { 
 
     if (span.innerHTML.indexOf('ORIGINAL_LABEL') > -1) { 
 
     span.innerHTML = span.innerHTML.replace('ORIGINAL_LABEL', 'MY_LABEL'); 
 
     } 
 
    }); 
 
    }); 
 
    observer.observe(chartDiv, { 
 
    childList: true, 
 
    subtree: true 
 
    }); 
 

 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div" style="width: 900px; height: 500px;"></div>

來源

2016-11-30 15:33:15 WhiteHat

這是有幫助的，是的，但是請注意，我問，如果有一些方法來做到這一點後圖表平局，因爲我不能改變之前的代碼圖紙。我會嘗試與突變觀察員，我會讓你知道！ –

您提到能夠使用'labelInLegend'更改選項 - 但是在繪製圖表之前，選項無法在之後更改。 'MutationObserver'工作，可能需要更多的定製 – WhiteHat

http://stackoverflow.com/questions/40891153/google-linechart-tooltip-is-showing-somewhere-else @WhiteHat需要你的幫助 –

Google Charts - 圖例和工具提示標籤

回答

相關問題