Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to display multiple JavaScript statistical charts on the same page". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to display multiple JavaScript statistical charts on the same page"!

I achieved a simple effect, as shown in the following figure:

Of course, the six icons all use exactly the same test data, which mainly solves the layout problem of multiple charts appearing on the same page.

The effect of opening it on the phone.

Take a quick look at the code:

Each of the two div contains six canvas. The first div is responsible for displaying the results of the problem with six pie charts, and the six canvas in the second div display bar charts. I used the display:inline attribute labeled! important for each canvas to force these statistical graphs located in the canvas node to be displayed from left to right, instead of wrapping each one by default.

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)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.