mootools bubble chart

J'essaye d'obtenir cette démo de diagramme de bulle de mootools (http://moochart.coneri.se/) pour travailler dans mon code mais ai un peu de difficulté. Quelqu'un peut-il aider avec ceci? Voici le code que j'ai (je pense que c'est ce que dit la documentation, mais corrigez-moi si je me trompe).mootools bubble chart

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MootoolsChart.aspx.cs" Inherits="BubbleChart.MootoolsChart" %> 

<!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 runat="server"> 
    <title></title> 
    <script type="text/javascript" src="http://moochart.coneri.se/dl1/moochart-0.1b1.js"></script> 
    <script type="text/javascript" src="http://moochart.coneri.se/dl1/moochart-0.1b1-nc.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script> 
    <script type ="text/javascript"> 
     var myChart = new Chart.Bubble('myChart',{ 
      width: 300, 
      height: 200, 
      bubbleSize: 20 
     }); 

     myChart.addBubble(10, 20, 30, '#fff', 'Bubble 1'); 
     myChart.addBubble(0, 40, 20, '#000', 'Bubble 2'); 

     myChart.redraw(); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <div id="myChart"></div> 
    </div> 
    </form> 
</body> 
</html>

Source

2010-09-14 locoboy

compris cela:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <script src="Scripts/mootools-1.2-more.js" type="text/javascript"></script> 
    <script src="Scripts/mootools-1.2-core.js" type="text/javascript"></script> 
    <script src="Scripts/moochart-0.1b1.js.js" type="text/javascript"></script> 
    <script src="Scripts/mainScript.js" type="text/javascript"></script> 
</head> 
<body> 
    <div id="chart1"> 
    </div> 
</body> 
</html> 


window.addEvent('domready', function() { 



    var chart1 = new Chart.Bubble('chart1', { 
     width: 600, 
     height: 350, 
     lineColor: '#3f3f3f', 
     zmin: 0, zmax: 100, 
     bubbleSize: 40 
    }); 

    chart1.bubbles = [ 
     { x: 82, y: 70, z: 90, color: '#318bd6', tip: '<b>HTML</b> is allowed in <span style="color: #71a8d6;">tooltips</span>' }, 
     { x: 21, y: 11, z: 0, color: '#000', tip: 'This bubble is the minimum size' }, 
     { x: 0, y: 0, z: 100, color: '#319344', tip: 'Bubbles can <u>never</u> fall outside the grid' } 

    ]; 

    chart1.redraw(); 



});

Source

2010-09-17 20:42:35 locoboy

Répondre

Questions connexes