• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Liniendiagramm

D

Druh

Neues Mitglied
Hallo,

Ich möchte ein Liniendiagramm bauen,
html (text + verknüpfungen) + css (layout) habe ich gebastelt.

<div id="Seite">
<form action="input_text.htm">
<p>a:<br><input name="a" type="text" size="30" maxlength="30"></p>
<p>b:<br><input name="b" type="text" size="30" maxlength="40"></p>
</form>
</div>

in Bearbeitung...
 
Zuletzt bearbeitet:
Druh hat sich wohl aus Angst, hier könnte der Platz ausgehen, erst mal einen Thread reserviert. Oder sie hat gemerkt, dass für die Frage noch was fehlt.

Ich vermute, da kommt in nächster Zeit noch eine ausgefeiltere Formulierung. Das ist zwar keine übliche Vorgehensweise, aber was soll's.
 
Zuletzt bearbeitet:
Druh schrieb:
in Bearbeitung...
Zum Vergrößern anklicken....

http://raphaeljs.com/
ich versuch jetzt damit

da ich nicht weiss, wie man das ansatzweise funktioniert
habe ich ein quellcode genommen.
diese in eine datei test.js gepackt und
so in html-datei implementiert, ist das so richtig?

(html datei)
<head>
<script src="test.js" type="text/javascript" charset="utf-8"></script>
</head>

irgendwie erscheint aber nichts in der html datei :/
hat jemand vielleicht ein kleines beispiel,
womit ich testen kann? darauf könnte man dann ja aufbauen...
 
Zuletzt bearbeitet:
Das Ganze muss so aussehen wie auf der Beispielseite:Raphaël · Analytics
HTML: 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Raphaël · Analytics</title>
        <link rel="stylesheet" href="demo.css" type="text/css" media="screen">
        <link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
        <script src="raphael.js"></script>
        <script src="popup.js"></script>

        <script src="jquery.js"></script>
        <script src="analytics.js"></script>
        <style type="text/css" media="screen">
            #holder {
                height: 250px;
                margin: -125px 0 0 -400px;
                width: 800px;
            }
        </style>
    </head>
    <body>
        <table id="data">
            <tfoot>

                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>

                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                    <th>11</th>

                    <th>12</th>
                    <th>13</th>
                    <th>14</th>
                    <th>15</th>
                    <th>16</th>
                    <th>17</th>

                    <th>18</th>
                    <th>19</th>
                    <th>19</th>
                    <th>20</th>
                    <th>22</th>
                    <th>23</th>

                    <th>24</th>
                    <th>25</th>
                    <th>26</th>
                    <th>27</th>
                    <th>28</th>
                    <th>29</th>

                    <th>30</th>
                    <th>31</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>8</td>

                    <td>25</td>
                    <td>27</td>
                    <td>25</td>
                    <td>54</td>
                    <td>59</td>
                    <td>79</td>

                    <td>47</td>
                    <td>27</td>
                    <td>44</td>
                    <td>44</td>
                    <td>51</td>
                    <td>56</td>

                    <td>83</td>
                    <td>12</td>
                    <td>91</td>
                    <td>52</td>
                    <td>12</td>
                    <td>40</td>

                    <td>8</td>
                    <td>60</td>
                    <td>29</td>
                    <td>7</td>
                    <td>33</td>
                    <td>56</td>

                    <td>25</td>
                    <td>1</td>
                    <td>78</td>
                    <td>70</td>
                    <td>68</td>
                    <td>2</td>

                </tr>
            </tbody>
        </table>
        <div id="holder"></div>
        <p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
    </body>
</html>

Die Dateien

  • demo.css
  • demo-print.css
  • raphael.js
  • popup.js
  • jquery.js
  • analytics.js

müssen dabei im Rootverzeichnis vorliegen.
 
Oder einfach der Anleitung folgen (siehe Startseite).

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
        <script type="text/javascript">
            /*<![CDATA[*/

            window.onload = function () {
                // Creates canvas 320 × 200 at 10, 50
                var paper = Raphael(10, 50, 320, 200);

                // Creates circle at x = 50, y = 40, with radius 10
                var circle = paper.circle(50, 40, 10);
                // Sets the fill attribute of the circle to red (#f00)
                circle.attr("fill", "#f00");

                // Sets the stroke attribute of the circle to white
                circle.attr("stroke", "#fff");
            };

            /*]]>*/
        </script>
    </head>

    <body>

    </body>

</html>

Einen Link zur Dokumentation findest du dort auch.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben