Как добавить настраиваемую подсказку в Google Chart? - PullRequest
Новая
       29

Как добавить настраиваемую подсказку в Google Chart?

0 голосов
/ 01 января 2019

Я создал диаграмму рассеяния нескольких серий, как показано ниже, используя диаграмму рассеяния на Google-диаграмме. Проблема в том, что я не могу добавить всплывающую подсказку (custamize) в свой код.

, и я хотел бы добавить текст "привет" навсплывающая подсказка вместо левого-нижнего и точки. 

 <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 Ответ

0 голосов
/ 02 января 2019

Api настолько настраиваемый, он действительно зависит от того, что именно вы хотите сделать, но с точки зрения рендеринга пользовательского маркера, это должно быть сделано.

Это часть кода, который я написал, чтобы получить долготуи широта от сервера рельсов и сюжет на его основе.Я предполагаю, что вы уже знаете, что вам нужно сохранить ссылку на маркеры, чтобы удалить / переместить его и т. Д., Но это, как получить пользовательский маркер, предполагая, что остальная часть вашего кода в порядке. 

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

Удачи!

...