[JavaScript] Detailed explanation of displaying multiple statistical charts and graphics on the same page

Recently, I received a development task, which required me to make statistics on the feedback answers filled in by customers in the "After-sales Service Customer Satisfaction Questionnaire".

An example of a question is:

• When was the last time you purchased our product?

• # Are the service staff friendly and conscientious?

• #How do you overall feel about the after-sales service provided by our company?

. . .

#The function I want to implement is to produce a report that displays the total number of occurrences of each answer for each question on the same page.

I achieved a simple effect, as shown below:

Of course, all six icons are used It is the same test data, which mainly solves the layout problem of multiple charts appearing on the same page.

Please use the link below to test the effect. You can use Chrome developer tools to view the implementation of 093_chart.html.

The effect of opening on mobile phone.

Let’s briefly review the code:

Each of the two ps contains 6 canvases. The first p is responsible for displaying the results of the problem with 6 pie charts, and the 6 canvases in the second p display the bar chart. I used the display:inline attribute marked !important on each canvas to force the statistical charts located in the canvas node to be displayed from left to right, instead of the default of wrapping every time one is displayed.

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);
}
}

Line 41 obtains the total width of the current window through the clientWidth property of the body node, and then divides it by 6.5. The quotient is the width of each statistical chart. The reason why we divide by 6.5 instead of 6 is to leave some space between the statistical charts in each row.

The type of statistical chart, the data and labels of X and Y coordinates are passed into the function createChartOnCanvas through the option object.

Related recommendations:

How does Baidu Map JavaScript API display multiple maps on the same page

Display multiple iChart reports on one page

The above is the detailed content of [JavaScript] Detailed explanation of displaying multiple statistical charts and graphics on the same page. For more information, please follow other related articles on the PHP Chinese website!