[JavaScript] Detaillierte Erläuterung der Anzeige mehrerer statistischer Diagramme und Grafiken auf derselben Seite

Kürzlich erhielt ich eine Entwicklungsaufgabe, bei der ich Statistiken über die Feedback-Antworten der Kunden im „Fragebogen zur Kundenzufriedenheit im After-Sales-Service“ erstellen musste.

Ein Beispiel für eine Frage ist:

• Wann haben Sie unser Produkt das letzte Mal gekauft?

• Sind die Servicekräfte freundlich und gewissenhaft?

• Wie beurteilen Sie insgesamt den Kundendienst unseres Unternehmens?

. . .

Die Funktion, die ich implementieren möchte, besteht darin, einen Bericht zu erstellen, der die Gesamtzahl des Vorkommens jeder Antwort für jede Frage auf derselben Seite anzeigt.

Ich habe einen einfachen Effekt erzielt, wie unten gezeigt:

Natürlich werden alle sechs Symbole verwendet. Es ist so dieselben Testdaten, wodurch hauptsächlich das Layoutproblem gelöst wird, wenn mehrere Diagramme auf derselben Seite angezeigt werden.

Bitte nutzen Sie den untenstehenden Link, um die Wirkung zu testen. Sie können Chrome-Entwicklertools verwenden, um die Implementierung von 093_chart.html anzuzeigen.

Der Effekt des Öffnens auf dem Mobiltelefon.

Sehen wir uns den Code kurz an:

Jedes der beiden PS enthält 6 Leinwände. Das erste p ist für die Anzeige der Ergebnisse des Problems mit 6 Kreisdiagrammen verantwortlich, und die 6 Leinwände im zweiten p zeigen das Balkendiagramm an. Ich habe das display:inline-Attribut mit der Markierung !important auf jeder Leinwand verwendet, um zu erzwingen, dass die statistischen Diagramme im Canvas-Knoten von links nach rechts angezeigt werden, anstatt standardmäßig jedes Mal umzubrechen, wenn eines angezeigt wird.

function loaded(){
var totalWidth = getBodyNode().clientWidth;
console.log("width in load: " + totalWidth);
var aCharts = document.getElementsByTagName("canvas");
for( var i = 0; i < aCharts.length; i++){
aCharts[i].width = totalWidth / 6.5;
}
var option = {
type: "pie",
xAxisData: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
yAxisData: [12, 19, 3, 5, 2, 3],
yAxisLabel: "Number of Votes"
};
for( var i = 1; i <= 6; i++ ){
createChartOnCanvas("myChart" + i, option);
}
option.type = "bar";
for( var i = 1; i <= 6; i++ ){
createChartOnCanvas("barChart" + i, option);
}
}

Zeile 41 ermittelt die Gesamtbreite des aktuellen Fensters über das clientWidth-Attribut des Körperknotens und dividiert sie dann durch 6,5. Der Quotient ist die Breite jedes statistischen Diagramms. Der Grund, warum wir durch 6,5 statt durch 6 dividieren, besteht darin, zwischen den statistischen Diagrammen in jeder Zeile etwas Platz zu lassen.

Der Typ des statistischen Diagramms, die Daten und Beschriftungen der X- und Y-Koordinaten werden über das Optionsobjekt an die Funktion createChartOnCanvas übergeben.

Verwandte Empfehlungen:

Wie die Baidu Map JavaScript API mehrere Karten auf derselben Seite anzeigt

Mehrere iChart-Berichte auf einer Seite anzeigen

Das obige ist der detaillierte Inhalt von[JavaScript] Detaillierte Erläuterung der Anzeige mehrerer statistischer Diagramme und Grafiken auf derselben Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!