在谷歌图表插值

我有以下代码：在谷歌图表插值

<script type="text/javascript"> 

      // Load the Visualization API and the piechart package. 
      google.load('visualization', '1', {'packages':['corechart']}); 

      // Set a callback to run when the Google Visualization API is loaded. 
      google.setOnLoadCallback(drawChart); 

      function drawChart() { 

       // Create our data table out of JSON data loaded from server. 
      // var data = new google.visualization.DataTable('<>'); 
        var data = google.visualization.arrayToDataTable([['Generation', 'Descendants'],[0,300], [85,300],[125,0] ]); 


       var options = { 
         title: 'Derating chart', 
          // Draw a trendline for data series 0. 
        lineWidth: 2,  
         hAxis: {title: 'Temperature [°C]', titleTextStyle: {color: 'black'}, logScale: false}, 
         vAxis: { 
          title: "Irms [A]", 

          maxValue:8 


         }, 
         pointSize:5 

        }; 


       // Instantiate and draw our chart, passing in some options. 
       // Do not forget to check your div ID 
       var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
       chart.draw(data, options); 
      } 
      </script>

Result of the script

这很简单，但我有以下问题： - 在我的图我有3点，是有可能内插这些点之间的值？我需要显示它们之间的值时，将鼠标放在线上

来源

2014-10-30 Mastor

徘徊线，而不是当你的意思是第一节显示0-85，第二节显示85-125？ – juvian 2014-10-30 17:43:10

是的，确切地说。它应该是像鼠标在线以上时获取X轴值和Y值一样的东西 – Mastor 2014-10-31 08:00:03

应该有一个选项......但检查论坛和文档没有发现。最接近这一点的是使用趋势线，但数值不符合您的界限。所以你唯一的办法就是手动做一些事情。下面是我使用jQuery做了一个解决办法：

//you need to have in options tooltip:{isHtml:true} for this to work 

     google.visualization.events.addListener(chart, 'ready', function(){ 
       $('#chart_div svg path').mousemove(function(e){ 
        $('.google-visualization-tooltip').remove(); // remove previous tooltips 
        var x=e.offsetX; // get x coordinate 
        var y=e.offsetY; //get y coordinate 
        var xValue= Math.round(chart.getChartLayoutInterface().getHAxisValue(x)); // get chart x value at coordinate 
        var yValue=Math.round(chart.getChartLayoutInterface().getVAxisValue(y)); // get chart y value at coordinate 
        // create tooltip 
        var tootlip = $('<div class= "google-visualization-tooltip"><ul class="google-visualization-tooltip-item-list"><li class="google-visualization-tooltip-item"><span >X : '+xValue+'</span></li><li class="google-visualization-tooltip-item"><span>Y : '+yValue+'</span></li></ul></div>'); 
        tootlip.css({position:'absolute', left:(x+20)+'px', top:(y-100)+'px', width:'100px', height:'70px'}) // set tooltip position 
        $('#chart_div').append(tootlip); // add tooltip to chart 

       }) 

       $('#chart_div svg path').mouseout(function(e){ 
        $('.google-visualization-tooltip').remove(); 

       }) 

      })

完全小提琴：http://jsfiddle.net/juvian/48ouLbmm/

注：没有鼠标移开它工作得更好，但提示会一直呆到下一个鼠标悬停

来源

2014-10-31 17:05:26 juvian

在谷歌图表插值

回答

相关问题