11款图表插件对比效果
代码语言：html
所属分类：图表
代码描述：11款图表插件对比效果，每一款都不同
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css'>
<style>
h1 {
margin-left: 4px;
margin-top: 21px;
margin-bottom: 0;
padding-top: 0;
font-size: 16px;
padding-left: 11px;
padding-right: 11px;
}
.chart {
box-sizing: border-box;
position: relative;
margin-left: 0;
margin-right: 0;
margin-bottom: 64px;
width: 100%;
float: left;
}
@media (min-width: 700px) {
.chart {
width: 50%;
}
}
@media (min-width: 1000px) {
.chart {
width: 33%;
}
}
#amCharts, #anyChart, #chartjs, #chartistjs, #d3js, #fusioncharts, #googlecharts, #highcharts, #echarts, #zingchart, #plotlyjs {
width: 100%;
height: 400px;
}
.line {
fill: none;
stroke-width: 2px;
}
.line:hover{
stroke-width: 5px;
}
.grid line{
stroke: gainsboro;
}
.grid path {
stroke: black;
}
</style>
</head>
<body translate="no">
<div class="chart">
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<h1>Chart #1 <a href="http://amcharts.com/">amCharts</a></h1>
<div id="amCharts"></div>
</div>
<div class="chart">
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<h1>Chart #2 <a href="https://www.anychart.com/">AnyChart</a></h1>
<div id="anyChart"></div>
</div>
<div class="chart">
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<h1>Chart #3 <a href="https://www.chartjs.org/">Chart.js</a> <font color="red">★ (100% canvas)</font></h1>
<div id="chartjs"></div>
</div>
<div class="chart">
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<h1>Chart #4 <a href="https://gionkunz.github.io/chartist-js/">Chartist.js</a></h1>
<div id="chartistjs"></div>
</div>
<div class="chart">
<script src="https://d3js.org/d3.v5.min.js"></script>
<h1>Chart #5 <a href="https://d3js.org/">D3.js</a></h1>
<div id="d3js"></div>
</div>
<div class="chart">
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<h1>Chart #6 <a href="https://www.fusioncharts.com/">FusionCharts</a></h1>
<div id="fusioncharts"></div>
</div>
<div class="chart">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Chart #7 <a href="https://developers.google.com/chart/">Google Charts</a></h1>
<div id="googlecharts"></div>
</div>
<div class="chart">
<script src="https://code.highcharts.com/highcharts.js"></script>
<h1>Chart #8 <a href="https://www.highcharts.com/">Highcharts</a> <font color="red">★ (easy to use)</font></h1>
<div id="highcharts"></div>
</div>
<div class="chart">
<script src=&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0