mootools泡沫图表

时间:2010-09-14 15:57:59

标签: asp.net charts mootools

我正试图让这个mootools气泡图演示(http://moochart.coneri.se/)在我的代码中工作但是有点困难。有人能帮忙吗?这是我的代码(我认为这是文档所说的,但如果我错了请纠正我。)

    <%@ 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>

1 个答案:

答案 0 :(得分:0)

想出来:

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



});