11款图表插件对比效果-html代码-BFW代码库

代码语言：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">&#9733; (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">&#9733; (easy to use)</font></h1>
<div id="highcharts"></div>
</div>


<div class="chart">
<script src="https://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<h1>Chart #9 <a href="https://ecomfe.github.io/echarts-examples/public/">ECharts</a> <font color="red">&#9733; (canvas, easy to use, good docs)</font></h1>
<div id="echarts"></div>
</div>


<div class="chart">
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
<h1>Chart #10 <a href="http://zingchart.com/">ZingChart</a></h1>
<div id="zingchart"></div>
</div>


<div class="chart">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<h1>Chart #11 <a href="https://plot.ly/javascript/">Plotly.js</a></h1>
<div id="plotlyjs"></div>
</div>


<script>
// Generate data
// --------------------------------
var CHART_TITLE = 'Trend of Sales of the Most Popular Products';
var VALUE_AXIS_TITLE = 'Number of Bottles Sold (thousands)';
var SERIES_TITLE = ['Brandy', 'Whiskey', 'Tequila'];

function getData() {
  return [
  ['1986', 3.6, 2.3, 2.8],
  ['1987', 7.1, 4.0, 4.1],
  ['1988', 8.5, 6.2, 5.1],
  ['1989', 9.2, 11.8, 6.5],
  ['1990', 10.1, 13.0, 12.5],
  ['1991', 11.6, 13.9, 18.0],
  ['1992', 16.4, 18.0, 21.0],
  ['1993', 18.0, 23.3, 20.3],
  ['1994', 13.2, 24.7, 19.2],
  ['1995', 12.0, 18.0, 14.4],
  ['1996', 3.2, 15.1, 9.2],
  ['1997', 4.1, 11.3, 5.9],
  ['1998', 6.3, 14.2, 5.2],
  ['1999', 9.4, 13.7, 4.7],
  ['2000', 11.5, 9.9, 4.2],
  ['2001', 13.5, 12.1, 1.2],
  ['2002', 14.8, 13.5, 5.4],
  ['2003', 16.6, 15.1, 6.3],
  ['2004', 18.1, 17.9, 8.9],
  ['2005', 17.0, 18.9, 10.1],
  ['2006', 16.6, 20.3, 11.5],
  ['2007', 14.1, 20.7, 12.2],
  ['2008', 15.7, 21.6, 10],
  ['2009', 12.0, 22.5, 8.9]];

}

function getDataColumn(data, сolumn) {
  var сolumtData = [];
  data.forEach(function (element) {
    сolumtData.push(element[сolumn]);
  });
  return сolumtData;
};


// amCharts
// --------------------------------
// Create line chart
var chart = am4core.create("amCharts", am4charts.XYChart);

// Create data set
chart.data = getData();

// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
// Series 1
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.dateX = "0";
series1.dataFields.valueY = "1";
series1.name = SERIES_TITLE[0];
// Series tooltip
series1.tooltipText = "{name}: {1}";
series1.tooltip.pointerOrientation = "vertical";

// Series 2
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.dateX = "0";
series2.dataFields.valueY = "2";
series2.name = SERIES_TITLE[1];
// Series tooltip
series2.tooltipText = "{name}: {2}";
series2.tooltip.pointerOrientation = "vertical";

// Series 3
var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.dateX = "0";
series3.dataFields.valueY = "3";
series3.name = SERIES_TITLE[2];
// Series tooltip
series3.tooltipText = "{name}: {3}";
series3.tooltip.pointerOrientation = "vertical";

// Turn on tooltips
chart.cursor = new am4charts.XYCursor();

// Set titles and legend
//var title = chart.titles.create();
//title.text = CHART_TITLE;
//valueAxis.title.text = VALUE_AXIS_TITLE;
chart.legend = new am4charts.Legend();

// Turn on chart animation
am4core.useTheme(am4themes_animated);

// Turn on filter
chart.scrollbarX = new am4core.Scrollbar();


// AnyChart
// --------------------------------
// Create line chart
var chart = anychart.line();

// Create data set
var dataSet = anychart.data.set(getData());

// Create series
// Series 1
var seriesData1 = dataSet.mapAs({ 'x': 0, 'value': 1 });
var series1 = chart.line(seriesData1);
series1.name(SERIES_TITLE[0]);
// Series tooltip
series1.hovered().markers().
enabled(true).
type('circle').
size(4);
series1.tooltip().
position('right').
anchor('left-center').
offsetX(5).
offsetY(5);

// Series 2
var seriesData2 = dataSet.mapAs({ 'x': 0, 'value': 2 });
var series2 = chart.line(seriesData2);
series2.name(SERIES_TITLE[1]);
// Series tooltip
series2.hovered().markers().
enabled(true).
type('circle').
size(4);
series2.tooltip().
position('right').
anchor('left-center').
offsetX(5).
offsetY(5);

// Series 3
var seriesData3 = dataSet.mapAs({ 'x': 0, 'value': 3 });
var series3 = chart.line(seriesData3);
series3.name(SERIES_TITLE[2]);
// Series tooltip
series3.hovered().markers().
enabled(true).
type('circle').
size(4);
series3.tooltip().
position('right').
anchor('left-center').
offsetX(5).
offsetY(5);

// Set titles and legend
//chart.title(CHART_TITLE);
//chart.yAxis().title(VALUE_AXIS_TITLE);
chart.legend().enabled(true);

// Turn on chart animation
chart.animation(true);

// Draw chart
chart.container('anyChart');
chart.draw();


// Chart.js
// --------------------------------
// Create data set and series
var data = getData();

var dataSet =
{
  labels: getDataColumn(data, 0),
  datasets: [{
    label: SERIES_TITLE[0],
    fill: false,
    data: getDataColumn(data, 1) },
  {
    label: SERIES_TITLE[1],
    fill: false,
    data: getDataColumn(data, 2) },
  {
    label: SERIES_TITLE[2],
    fill: false,
    data: getDataColumn(data, 3) }] };



// Set options
var options =
{
  responsive: true,
  title: {
    display: false,
    text: CHART_TITLE },

  tooltips: {
    mode: 'index',
    intersect: false },

  hover: {
    mode: 'nearest',
    intersect: true },

  scales: {
    yAxes: [{
      display: true,
      scaleLabel: {
        display: false,
        labelString: VALUE_AXIS_TITLE } }] } };





// Draw chart
var canvas = document.createElement("canvas");
document.getElementById('chartjs').appendChild(canvas);

var ctx = canvas.getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: dataSet,
  options: options });



// Chartist.js
// --------------------------------
var data = getData();
var chartData = {
  labels: getDataColumn(data, 0),
  series: [
  getDataColumn(data, 1),
  getDataColumn(data, 2),
  getDataColumn(data, 3)] };


var options = {
  fullWidth: true,
  chartPadding: {
    right: 40 } };


new Chartist.Line('#chartistjs', chartData, options);


// D3.js
// --------------------------------
// Create data set and series
var data = getData();
// === 1. Boilerplate setup
// Set canvas margins
var margin = {
  top: 5,
  right: 80,
  bottom: 20,
  left: 20 };

var divBounds = document.getElementById('d3js').getBoundingClientRect();
var width = divBounds.width - margin.left - margin.right;
var height = divBounds.height - margin.top - margin.bottom;

// Add color dynamically
var color = d3.scaleOrdinal(d3.schemeCategory10);

// Create svg object
var svg = d3.select('#d3js').append('svg').
attr('width', width + margin.left + margin.right).
attr('height', height + margin.top + margin.bot.........完整代码请登录后点击上方下载按钮下载查看