google charts

使用的时候，引入的包比echarts小

//在html中引入方式<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>//在项目中引用
npm install chart.js

google charts

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><title>Document</title><style>body {padding: 16px;}canvas {border: 1px dotted red;}</style></head><body><canvas id="chart" height="50vw" width="50vw"></canvas><script>function getColor(number) {const colorList = ["#FFC125","#FF6A6A","#55A8FD","#5FDAC7","#FA7D7D","#AEB3B8","#92C789","#6A6A6A","#FFD700","#FFC1C1","#FF6A6A","#E066FF",];return colorList[number];}var mychart = document.getElementById("chart").getContext("2d");new Chart(mychart, {type: "doughnut",data: {labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],datasets: [{data: [65, 59, 20, 81, 56, 55, 40],borderWidth: 1,backgroundColor: [65, 59, 20, 81, 56, 55, 40].map((item, index) =>getColor(index % 10)),},],},options: {maintainAspectRatio: true,aspectRatio: 1.5,plugins: {legend: {position: "right",labels: {boxWidth: 12,font: {boxWidth: 24,size: 12,pointStyle: "circle",usePointStyle: true,},},},tooltip: {callbacks: {label: function (context) {var label = `${context.label} ${context.formattedValue}%`;return label;},},bodyFont: {size: 12,},},},},});</script></body>
</html>

google charts相关推荐

可视化数据网页开发Google Charts（十二）:折线图
Line Chart 概述在浏览器中使用SVG或VML呈现的折线图.当鼠标悬停在点上时显示工具提示. 弯曲的线条您可以通过设置curveType选项来平滑线条,生成此图表的代码如下.注意使用cur ...
可视化数据网页开发Google Charts（一）:加载库
Google Charts 除少数例外情况外,所有包含Google图表的网页都应在网页的<head>中包含以下几行: <script type="text/javascri ...
数据可视化(3)--Google Charts
Google Chart API 是谷歌提供的一项动态生成图表的服务.你可以随时自定义图表,以适应网站的外观和感觉.图表使用HTML5/SVG技术提供给iPhone手机, iPad和Android的跨 ...
PHP接入谷歌验证器(Google Authenticator)
github类库地址,点击进入下载 <?php require_once 'PHPGangsta/GoogleAuthenticator.php'; //引入类库 $ga = new PHPGa ...
Google pieCharts的学习
在公司项目开发过程中, 尤其是在网站的开发过程中,用到很多的前端的插件,在这里, 我简单介绍下近期Google pieCharts的是使用方法 https://developers.google.co ...
Google Earth Engine（GEE）——简单快速生成图形chart！
地球引擎对象图表该ui.Chart插件提供帮助方法来构建DataTable和呈现从图表Image,ImageCollection Feature,FeatureCollection, Array,和 ...
python导入excel到access_如何使用Python访问(读取和写入)Google表格电子表格？
我想知道是否可以为我提供一个使用python从Google文档/电子表格读取/写入的示例. 我确实在这里https://developers.google.com/google-apps/spread ...
Google authenticator 谷歌身份验证，实现动态口令
Google authenticator 谷歌身份验证,实现动态口令 google authenticator php 服务端使用PHP类 require_once '../PHPGangsta/G ...
使用google authenticator(谷歌身份验证器)打造用户登录动态口令
google authenticator php 服务端使用php类直接下载 https://github.com/PHPGangsta/GoogleAuthenticator/raw/maste ...

google charts

google charts

google charts相关推荐

最新文章

热门文章