Add a link/button in the htmlExpand

hky87發表於2010-07-07
HTML
在highslide應用中，對高亮顯示框中的文字新增超連結或按鈕的方法。
該例子是基於highcharts應用上的
 
ttp://www.w3.org/TR/html4/strict.dtd">http://www.w3.org/TR/html4/strict.dtd">

 
  
  Highcharts Example
  
  
  
<!-- 1. Add these JavaScript. inclusions in the head of your page --&gt
  

  

  
<!--[if IE]>
   
    
  
  
  

<!-- 2. Add the JavaScript. to initialize the chart on document ready --&gt
  

  
            var chart;
  //globally available
            $(document).ready(function() {
   
       chart = new Highcharts.Chart({
    chart: {
     renderTo: 'container',
     defaultSeriesType: 'spline'
    },
    title: {
     text: 'Monthly Average Temperature in Tokyo'
    },
    subtitle: {
     text: 'Source: WorldClimate.com'
    },
    xAxis: {
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     title: {
      text: 'Month'
     }
    },
    yAxis: {
     title: {
      text: 'Temperature (°C)'
     }
    },
    legend: {
     enabled: false
    },
    tooltip: {
     formatter: function() {
                   return ''+ this.series.name +'
'+
       this.x +': '+ this.y +'°C';
     }
    },
    plotOptions: {
     spline: {
      cursor: 'pointer',
      point: {
       events: {
        click: function() {
        //alert("Hello Word!");
         //window.open("line-basic.htm");
         //window.navigate("line-basic.htm");
        //window.location.href="line-basic.htm";

  /*hs.expand(null, {
      src: 'skies.jpg'
   });
hs.Expander.prototype.onImageClick = function (sender) {
   return window.open("line-basic.htm");
}*/
         hs.htmlExpand(null, {
          pageOrigin: {
           x: this.pageX,
           y: this.pageY
          },
          headingText: "\n \n"+this.series.name+"",
          maincontentText: 'this.category: '+ this.category +
           '
this.y: '+ this.y,
          width: 200
         }); 
        }
       }
      }
     }
    },
    
    series: [{
     name: 'Tokyo',
     dataURL: 'tokyo.json'
    }]
   });
   
   
  });
  
  
 
   
   



 
  
  <!-- 3. Add the container --&gt
  

  
    
 

 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/10314474/viewspace-667505/，如需轉載，請註明出處，否則將追究法律責任。

相關文章