WebRoot/FusionChartsFree/Contents/DrillDown/JavaScript.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts Free Documentation</title>
<link rel="stylesheet" href="../Style.css" type="text/css" />
<style type="text/css">
<!--
.style4 {color: #E0E0E0}
-->
</style>
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><h2 class="pageHeader">Using JavaScript functions as links</h2></td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>Instead of using simple links, you can also 
        set JavaScript links using FusionCharts i.e., you can invoke a JavaScript 
        function present in the same page (in which the chart is present) when 
        the end viewer clicks a data element on the chart. To attain this, all 
        you need to do is place the name of JavaScript function instead of the 
        link URL, as under:</p>
      <p class="codeInline"><span class="codeBlock">&lt;set name='Japan' 
      value='123' <strong>link=&quot;JavaScript:myJS('Japan, 123');&quot;</strong> color='F6BD0F'/&gt; </span></p>
      <p>In the above code, <span class="codeInline">myJS</span> refers to a custom 
        JavaScript function present in the HTML page that embeds this chart. You 
        can also specify any number of parameters for this function. When you 
        now click the data item (column, pie, bar etc.) for this particular data, 
        <span class="codeInline">myJS </span>function would be invoked and 'Japan, 
        123' would be passed to the function as the function parameter. Here, 
        we've passed the data label and value just for demonstration purposes. 
        In actual charts, you can pass identifier numbers or strings to each data. 
        When the user clicks on the link, these identifiers can be sent back to 
        your JavaScript functions for further actions (like loading detailed data 
        for that identifier using AJAX or anything - the possibilities are endless).</p>
      <p>Let's quickly put up an example for this kind of links. We'll create 
        a simple 2D Column chart indicating &quot;ABC Bank Branches&quot; in Asia. 
        Each column when clicked, would pass its label and value to our custom 
        JavaScript function <span class="codeInline">myJS</span>, which (for the 
        sake of demonstration) would just write it out in an alert box. </p>
      <p>We create <span class="codeInline">JSExample.html</span> for this example 
        in <span class="codeInline">DrillDown</span> folder. It contains the following 
        HTML code:</p></td>
  </tr>
  <tr> 
    <td valign="top" class="codeBlock">&lt;html&gt;<br /> &nbsp;&nbsp;&nbsp;&lt;head&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;JavaScript Link Example&lt;/title&gt;<br /> 
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script language=&quot;JavaScript&quot; 
      src=&quot;../FusionCharts/FusionCharts.js&quot;&gt;&lt;/script&gt;<br /> 
      <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function myJS(myVar){<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.alert(myVar);<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//--&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/SCRIPT&gt;<br />
      </strong>&nbsp;&nbsp;&nbsp;&lt;/head&gt; <p>&lt;body bgcolor=&quot;#ffffff&quot;&gt;<br />