Wie zeichne Graph in Java Script?

Question

Ich möchte Grafik in Java-Skript zeichnen. Lassen Sie mich mein Problem mit einem einfachen Beispiel teilen.

Ind vs Aus cricket match. 
    X axis- Overs 
    Y axis- Runs 

Ich möchte Läufe zeigen, die von beiden Teams in der gleichen Grafik in jedem Diagramm dargestellt werden. Kann ich sie zusammen zeigen?

Ihre Erfahrung wird für mich nützlich sein. auf Hilfe hoffen.

würde um Hilfe ... Vielen Dank im Voraus dankbar ,,

Answer 1

den Versuchen Google Visualization API:

Es Klassen enthält Datentabellen zu bauen und sie dann mit verschiedenen Arten von Diagrammen zu visualisieren:

Beispiel aus die Google Visualiation Code Playground:

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'x'); 
    data.addColumn('number', 'Cats'); 
    data.addColumn('number', 'Blanket 1'); 
    data.addColumn('number', 'Blanket 2'); 
    data.addRow(["A", 1, 1, 0.5]); 
    data.addRow(["B", 2, 0.5, 1]); 
    data.addRow(["C", 4, 1, 0.5]); 
    data.addRow(["D", 8, 0.5, 1]); 
    data.addRow(["E", 7, 1, 0.5]); 
    data.addRow(["F", 7, 0.5, 1]); 
    data.addRow(["G", 8, 1, 0.5]); 
    data.addRow(["H", 4, 0.5, 1]); 
    data.addRow(["I", 2, 1, 0.5]); 
    data.addRow(["J", 3.5, 0.5, 1]); 
    data.addRow(["K", 3, 1, 0.5]); 
    data.addRow(["L", 3.5, 0.5, 1]); 
    data.addRow(["M", 1, 1, 0.5]); 
    data.addRow(["N", 1, 0.5, 1]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10}} 
     ); 
} 

Dies wird ein Liniendiagramm mit der X- und Y-Achse erzeugen, was um Sie Versuche es zu tun.

Answer 2

gRaphael ist eine gute Wahl für Diagramme für das Internet. Es verwendet Javascript, um Grafiken in SVG und in alten Versionen von IE, VML, zu erstellen, was es zu einem großartigen browserübergreifenden Ausgangspunkt macht - es funktioniert in IE6 und höher und benötigt keinen Flash. Ein weiterer Vorteil ist, dass die Verwendung von SVG/VML-DOM-Elementen, die von einem JavaScript-Objekt gesteuert werden, dazu führt, dass Ihre Grafikelemente in JavaScript jederzeit sehr interaktiv und manipuliert werden können.

Beispielcode (from doc barchart examples):

r.hbarchart(10, 250, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10], [10, 2, 1, 5, 32, 13, 20, 55]]).hover(fin, fout); 

Diese Linie ein zwei variable Balkendiagramm erstellt, die mousein und mouseout Rückruf ruft Funktionen auf jedes Element, das Sie zugehörige Informationen nutzen könnten zeigen zB in ihrem Beispiel, die genauen Werte. Ein Balkendiagramm mit zwei Variablen ist wahrscheinlich eine gute Möglichkeit, die Punktzahl von zwei Teams bei einem Innings um ein Vielfaches darzustellen. A graphael dot chart könnte eine bessere Option sein, wenn es mehrere Overs und mehrere Innings gibt - eines für jedes Team. Es werden auch andere Diagrammtypen unterstützt - siehe die Demo-Beispiele auf der Hauptprojektseite oben.