在同一页面显示多个JavaScript统计图表

简介: 在同一页面显示多个JavaScript统计图表

image.pngimage.pngimage.pngimage.pngimage.png

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

  }

}

image.png

目录
相关文章
|
8天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
13 0
|
9天前
|
开发框架 数据可视化 .NET
在Blazor中使用Chart.js快速创建图表
在Blazor中使用Chart.js快速创建图表
|
27天前
|
JavaScript 前端开发 Java
springboot从控制器请求至页面时js失效的解决方法
springboot从控制器请求至页面时js失效的解决方法
15 0
springboot从控制器请求至页面时js失效的解决方法
|
1月前
|
Web App开发 前端开发 JavaScript
编程笔记 html5&css&js 004 我的第一个页面
编程笔记 html5&css&js 004 我的第一个页面
|
3月前
|
JavaScript
如何使用JS控制指定页面大小开启全屏和退出全屏
如何使用JS控制指定页面大小开启全屏和退出全屏
25 0
|
27天前
|
JavaScript 前端开发
springboot+layui从控制器请求至页面时js失效的解决方法
springboot+layui从控制器请求至页面时js失效的解决方法
15 0
|
3月前
|
JavaScript
如何用js在页面中添加元素?
如何用js在页面中添加元素?
24 0
|
6天前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表
|
11天前
|
JavaScript 前端开发
如何通过js实现对句子个数的统计
使用JavaScript统计文本中句子个数,可通过识别语言类型(中文/日文:句号、问号、感叹号,西方语言:.?!)来分割文本。示例代码提供。同样,也有字数统计函数,对中文和西方语言处理方式不同。
|
16天前
|
JavaScript 前端开发
JS:如何创建新元素并添加到页面中
JS:如何创建新元素并添加到页面中
21 1