0

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.

and i would like to add "hello" text on the tooltip instead of the left-low and point.

 <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,

4

1 回答 1

0

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

祝你好运！

于 2019-01-01T23:26:06.977 回答