如何在Google图表上添加自定义工具提示？
[英]How to add customize tooltip on Google Chart?
问题描述
I created multiple series scatter chart as below using scatter chart in google chart, The problem is i cant add the tooltip (custamize) in my code. 
我使用Google图表中的散点图创建了多个系列散点图，如下所示。问题是我无法在代码中添加工具提示（自定义）。
and i would like to add "hello" text on the tooltip instead of the left-low and point. 我想在工具提示上添加“ 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>
I've searched a lot and couldn't find any solution for this. 我已经搜索了很多，却找不到任何解决方案。 This is my code i tried. 这是我尝试过的代码。 Can anyone help me to find the solution Thanks, 谁能帮我找到解决方案，谢谢，
1 个解决方案
解决方案1
0 2019-01-01 23:26:06
The Api is so configurable, it really depends on exactly what you want to do but in terms of rendering a custom marker, this should do it. Api是如此可配置的，它确实取决于您要执行的操作，但是就渲染自定义标记而言，应该做到这一点。
This is part of some code i wrote to get longitude and latitude from a rails server and plot based on it. 这是我为从Rails服务器获取经度和纬度并基于其进行绘制而编写的某些代码的一部分。 I'm assuming you are already aware that youll need to keep a reference to the markers in order to delete / relocate it etc, but this how to get a custom marker assuming the rest of your code is sound. 我假设您已经知道您需要保留对标记的引用才能删除/重定位它，等等，但是假设您的其余代码是正确的，那么这将如何获得自定义标记。
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);
Good luck! 祝好运！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.