Question

我使用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>

我已经搜索了很多，却找不到任何解决方案。这是我尝试过的代码。谁能帮我找到解决方案谢谢，

Answer 1

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

祝你好运！

如何在Google图表上添加自定义工具提示？

1 个答案: