amcharts实现点状线图悬浮放大效果-html代码-BFW代码库

amcharts实现点状线图悬浮放大效果

代码语言：html

所属分类：图表

代码描述：amcharts实现点状线图悬浮放大效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url(https://fonts.googleapis.com/css?family=Lato:200,300);

#chartdiv {
	width		: 100%;
	height		: 400px;
	font-size	: 11px;
}	

.amcharts-graph-g1 .amcharts-graph-fill {
  filter: url(#blur);
}

.amcharts-graph-g2 .amcharts-graph-fill {filter: url(#blur);
}

.amcharts-cursor-fill {
  filter: url(#shadow);
}
</style>

</head>
<body translate="no">

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/amcharts-serial.js"></script>
<div id="chartdiv"></div>

<script>
var chartData = [{
  "year": 2000,
  "cars": 1691,
  "motorcycles": 737 },

{
  "year": 2001,
  "cars": 1098,
  "motorcycles": 680,
  "bicycles": 910 },
{
  "year": 2002,
  "cars": 975,
  "motorcycles": 664,
  "bicycles": 670 },
{
  "year": 2003,
  "cars": 1246,
  "motorcycles": 648,
  "bicycles": 930 },
{
  "year": 2004,
  "cars": 1218,
  "motorcycles": 637,
  "bicycles": 1010 },
{
  "year": 2005,
  "cars": 1913,
  "motorcycles": 133,
  "bicycles": 1770 },
{
  "year": 2006,
  "cars": 1299,
  "motorcycles": 621,
  "bicycles": 820 },
{
  "year": 2007,
  "cars": 1110,
  "motorcycles": 10,
  "bicycles": 1050 },
{
  "year": 2008,
  "cars": 765,
  "motorcycles": 232,
  "bicycles": 650 },
{
  "year": 2009,
  "cars": 1145,
  "motorcycles": 219,
  "bicycles": 780 },
{
  "year": 2010,
  "cars": 1163,
  "motorcycles": 201,
  "bicycles": 700 },
{
  "year": 2011,
  "cars": 1780,
  "motorcycles": 85,
  "bicycles": 1470 },
{
  "year": 2012,
  "cars": 1580,
  "motorcycles": 285 }];


var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "fontFamily": "Lato",
  "autoMargins": true,
  "addClassNames": true,
  "zoomOutText": "",
  "defs": {
    "filter": [
    {
      "x": "-50%",
      "y": "-50%",
      "width": "200%",
      "height": "200%",
      "id": "blur",
      "feGaussianBlur": {
        "in": "SourceGraphic",
        "stdDeviation": "50" } },


    {
      "id": "shadow",
      "width": "150%",
      "height": "150%",
      "feOffset": {
        "result": "offOut",
        "in": "SourceAlpha",
        "dx": "2",
        "dy": "2" },

      "feGaussianBlur": {
        "result": "blurOut",
        "in": "offOut",
        "std.........完整代码请登录后点击上方下载按钮下载查看