如何在Google圖表上添加自定義工具提示？
[英]How to add customize tooltip on Google Chart?
問題描述
我使用Google圖表中的散點圖創建了多個系列散點圖，如下所示。問題是我無法在代碼中添加工具提示（自定義）。
我想在工具提示上添加“ hello”文本，而不是左下角和點。
<script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load('current', { packages: ['corechart'] }). then(function () { var dataTable = new google.visualization.DataTable({ cols: [ { label: 'dsf', type: 'number' }, { label: 'Left-Low', type: 'number' }, { label: 'Left-High', type: 'number' }, { label: 'Right-Low', type: 'number' }, { label: 'Right-High', type: 'number' }, { label: 'dssd', type: 'number' }, { type: 'string', role: 'tooltip' ,p : { 'html': true } } ], rows: [ // scatter //(x,y) { c: [{ v: 0.6 }, { v: 0.5 }, null, null, null, null, {v: 'hello'}] }, { c: [{ v: 0.4 }, { v: 0.2 }, null, null, null, null, { v: 'hello' }] }, // colors //x,null,height yellow n red of right yaxis,height of red right upper point,mull,mull { c: [{ v: 0 }, null, { v: 0.5 }, { v: 0.5 }, null, null,null] }, //left if width red n yello x-axis, null,height yellow n red of left yaxis,height of red right upper point { c: [{ v: 0.5}, null, { v: 0.5 }, { v:0.5}, null, null,null] }, { c: [{ v: 0.5 }, null, { v: null }, { v: null }, { v: 0.5 }, { v: 0.5 },null] }, { c: [{ v: 1 }, null, { v: null }, { v: null }, { v: 0.5 }, { v: 0.5 },null] }, ] }); var options = { colors: ['#000000'], legend: 'none', hAxis: { ticks: [0, 0.5, 1], }, height: 600, isStacked: true, series: { // Left-Low 1: { areaOpacity: 0.8, color: '#eaea75', enableInteractivity: false, type: 'area', visibleInLegend: false }, // Left-High 2: { areaOpacity: 0.8, color: '#e77272', enableInteractivity: false, type: 'area', visibleInLegend: false }, // Right-Low 3: { areaOpacity: 0.8, color: '#35d660', enableInteractivity: false, type: 'area', visibleInLegend: false }, // Right-High 4: { areaOpacity: 0.8, color: '#8cd7f0', enableInteractivity: false, type: 'area', visibleInLegend: false } }, seriesType: 'scatter', vAxis: { ticks: [ 0.5, 1], } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(dataTable, options); }); </script>
<body> <div id="chart_div"></div> </body>
我已經搜索了很多，卻找不到任何解決方案。 這是我嘗試過的代碼。 誰能幫我找到解決方案，謝謝，
1 個解決方案
解決方案1
0 2019-01-01 23:26:06
Api是如此可配置的，它確實取決於您要執行的操作，但是就渲染自定義標記而言，應該做到這一點。
這是我為從Rails服務器獲取經度和緯度並基於其進行繪制而編寫的某些代碼的一部分。 我假設您已經知道您需要保留對標記的引用才能刪除/重定位它，等等，但是假設您的其余代碼是正確的，那么這將如何獲得自定義標記。
const myIcon = L.icon({
iconUrl: '{PATH!}/myicon.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
className: 'mapIcon'
});
function renderMarkers (e){
loc_lat_lng=e
const marker=L.marker([e.lat, e.lng], {icon: goChefIcon}).addTo(mymap);
}
function onMapClick(e) {
mymap.panTo(e.latlng)
renderMarkers(e.latlng)
}
mymap.on('click', onMapClick);
祝好運！
如何在 angular-google-charts 中將“工具提示”添加到時間軸圖表？
[英]How to add 'tooltip' to Timeline chart in angular-google-charts?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.