amCharts绘制带趋势线折线图

代码案例

 <!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
    <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
    <style>
        #chartdiv {
          width: 650PX;
          height: 280px;
        }
    </style>
  </head>
  <body>
    <div id="chartdiv"></div>
    
    <script>
        am5.ready(function() {
        
        // Create root element
        // https://www.amcharts.com/docs/v5/getting-started/#Root_element
        var root = am5.Root.new("chartdiv");
        
        // Set themes
        // https://www.amcharts.com/docs/v5/concepts/themes/
        root.setThemes([
          am5themes_Animated.new(root)
        ]);
        
        root.dateFormatter.setAll({
          dateFormat: "yyyy",
          dateFields: ["valueX"]
        });
        
        var data = [
          {
            date: "2012-01-01",
            value: 8
          },
          {
            date: "2012-01-02",
            value: 10
          },
          {
            date: "2012-01-03",
            value: 12
          },
          {
            date: "2012-01-04",
            value: 14
          },
          {
            date: "2012-01-05",
            value: 11
          },
          {
            date: "2012-01-06",
            value: 6
          },
          {
            date: "2012-01-07",
            value: 7
          },
          {
            date: "2012-01-08",
            value: 9
          },
          {
            date: "2012-01-09",
            value: 13
          },
          {
            date: "2012-01-10",
            value: 15
          },
          {
            date: "2012-01-11",
            value: 19
          },
          {
            date: "2012-01-12",
            value: 21
          },
          {
            date: "2012-01-13",
            value: 22
          },
          {
            date: "2012-01-14",
            value: 20
          },
          {
            date: "2012-01-15",
            value: 18
          },
          {
            date: "2012-01-16",
            value: 14
          },
          {
            date: "2012-01-17",
            value: 16
          },
          {
            date: "2012-01-18",
            value: 18
          },
          {
            date: "2012-01-19",
            value: 17
          },
          {
            date: "2012-01-20",
            value: 15
          },
          {
            date: "2012-01-21",
            value: 12
          },
          {
            date: "2012-01-22",
            value: 10
          },
          {
            date: "2012-01-23",
            value: 8
          }
        ];
        
        // Create chart
        // https://www.amcharts.com/docs/v5/charts/xy-chart/
        var chart = root.container.children.push(
          am5xy.XYChart.new(root, {
            focusable: true,
            panX: true,
            panY: true,
            wheelX: "panX",
            wheelY: "zoomX",
            pinchZoomX: true,
            paddingLeft: 0
          })
        );
        
        var easing = am5.ease.linear;
        
        // Create axes
        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        var xAxis = chart.xAxes.push(
          am5xy.DateAxis.new(root, {
            maxDeviation: 0.5,
            groupData: false,
            baseInterval: {
              timeUnit: "day",
              count: 1
            },
            renderer: am5xy.AxisRendererX.new(root, {
              pan: "zoom",
              minGridDistance: 70,
              minorGridEnabled: true
            }),
            tooltip: am5.Tooltip.new(root, {})
          })
        );
        
        var yAxis = chart.yAxes.push(
          am5xy.ValueAxis.new(root, {
            maxDeviation: 1,
            renderer: am5xy.AxisRendererY.new(root, { pan: "zoom" })
          })
        );
        
        // Add series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        var series = chart.series.push(
          am5xy.LineSeries.new(root, {
            minBulletDistance: 10,
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: "value",
            valueXField: "date",
            tooltip: am5.Tooltip.new(root, {
              pointerOrientation: "horizontal",
              labelText: "{valueY}"
            })
          })
        );
        
        // Set up data processor to parse string dates
        // https://www.amcharts.com/docs/v5/concepts/data/#Pre_processing_data
        series.data.processor = am5.DataProcessor.new(root, {
          dateFormat: "yyyy-MM-dd",
          dateFields: ["date"]
        });
        
        series.data.setAll(data);
        
        series.bullets.push(function () {
          var circle = am5.Circle.new(root, {
            radius: 4,
            fill: series.get("fill"),
            stroke: root.interfaceColors.get("background"),
            strokeWidth: 2
          });
        
          return am5.Bullet.new(root, {
            sprite: circle
          });
        });
        
        createTrendLine(
          [
            { date: "2012-01-02", value: 10 },
            { date: "2012-01-11", value: 19 }
          ],
          root.interfaceColors.get("positive")
        );
        
        createTrendLine(
          [
            { date: "2012-01-17", value: 16 },
            { date: "2012-01-22", value: 10 }
          ],
          root.interfaceColors.get("negative")
        );
        
        function createTrendLine(data, color) {
          var series = chart.series.push(
            am5xy.LineSeries.new(root, {
              xAxis: xAxis,
              yAxis: yAxis,
              valueXField: "date",
              stroke: color,
              valueYField: "value"
            })
          );
        
          series.data.processor = am5.DataProcessor.new(root, {
            dateFormat: "yyyy-MM-dd",
            dateFields: ["date"]
          });
        
          series.data.setAll(data);
          series.appear(1000, 100);
        }
        
        // Add cursor
        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
          xAxis: xAxis
        }));
        cursor.lineY.set("visible", false);
        
        // add scrollbar
        chart.set("scrollbarX", am5.Scrollbar.new(root, {
          orientation: "horizontal"
        }));
        
        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        series.appear(1000, 100);
        chart.appear(1000, 100);
        
        }); // end am5.ready()
    </script>        
  </body>
</html>

效果图

posted @ 2024-05-30 15:04 DogLeftover 阅读(10) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· amCharts绘制折线图比较

· amCharts绘制折线图尾部动画

· 点会转的折线图还带着柱子

· android折线图的实现

· echarts 折线图拼接

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

历史上的今天：
2021-05-30 spring boot纯注解开发模板

amCharts绘制带趋势线折线图

我的标签

合集 (4)

随笔分类 (1350)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
	<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
	<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
	<style>
	#chartdiv {
	width: 650PX;
	height: 280px;
	}
	</style>
	</head>
	<body>
	<div id="chartdiv"></div>

	<script>
	am5.ready(function() {

	// Create root element
	// https://www.amcharts.com/docs/v5/getting-started/#Root_element
	var root = am5.Root.new("chartdiv");

	// Set themes
	// https://www.amcharts.com/docs/v5/concepts/themes/
	root.setThemes([
	am5themes_Animated.new(root)
	]);

	root.dateFormatter.setAll({
	dateFormat: "yyyy",
	dateFields: ["valueX"]
	});

	var data = [
	{
	date: "2012-01-01",
	value: 8
	},
	{
	date: "2012-01-02",
	value: 10
	},
	{
	date: "2012-01-03",
	value: 12
	},
	{
	date: "2012-01-04",
	value: 14
	},
	{
	date: "2012-01-05",
	value: 11
	},
	{
	date: "2012-01-06",
	value: 6
	},
	{
	date: "2012-01-07",
	value: 7
	},
	{
	date: "2012-01-08",
	value: 9
	},
	{
	date: "2012-01-09",
	value: 13
	},
	{
	date: "2012-01-10",
	value: 15
	},
	{
	date: "2012-01-11",
	value: 19
	},
	{
	date: "2012-01-12",
	value: 21
	},
	{
	date: "2012-01-13",
	value: 22
	},
	{
	date: "2012-01-14",
	value: 20
	},
	{
	date: "2012-01-15",
	value: 18
	},
	{
	date: "2012-01-16",
	value: 14
	},
	{
	date: "2012-01-17",
	value: 16
	},
	{
	date: "2012-01-18",
	value: 18
	},
	{
	date: "2012-01-19",
	value: 17
	},
	{
	date: "2012-01-20",
	value: 15
	},
	{
	date: "2012-01-21",
	value: 12
	},
	{
	date: "2012-01-22",
	value: 10
	},
	{
	date: "2012-01-23",
	value: 8
	}
	];

	// Create chart
	// https://www.amcharts.com/docs/v5/charts/xy-chart/
	var chart = root.container.children.push(
	am5xy.XYChart.new(root, {
	focusable: true,
	panX: true,
	panY: true,
	wheelX: "panX",
	wheelY: "zoomX",
	pinchZoomX: true,
	paddingLeft: 0
	})
	);

	var easing = am5.ease.linear;

	// Create axes
	// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
	var xAxis = chart.xAxes.push(
	am5xy.DateAxis.new(root, {
	maxDeviation: 0.5,
	groupData: false,
	baseInterval: {
	timeUnit: "day",
	count: 1
	},
	renderer: am5xy.AxisRendererX.new(root, {
	pan: "zoom",
	minGridDistance: 70,
	minorGridEnabled: true
	}),
	tooltip: am5.Tooltip.new(root, {})
	})
	);

	var yAxis = chart.yAxes.push(
	am5xy.ValueAxis.new(root, {
	maxDeviation: 1,
	renderer: am5xy.AxisRendererY.new(root, { pan: "zoom" })
	})
	);

	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	var series = chart.series.push(
	am5xy.LineSeries.new(root, {
	minBulletDistance: 10,
	xAxis: xAxis,
	yAxis: yAxis,
	valueYField: "value",
	valueXField: "date",
	tooltip: am5.Tooltip.new(root, {
	pointerOrientation: "horizontal",
	labelText: "{valueY}"
	})
	})
	);

	// Set up data processor to parse string dates
	// https://www.amcharts.com/docs/v5/concepts/data/#Pre_processing_data
	series.data.processor = am5.DataProcessor.new(root, {
	dateFormat: "yyyy-MM-dd",
	dateFields: ["date"]
	});

	series.data.setAll(data);

	series.bullets.push(function () {
	var circle = am5.Circle.new(root, {
	radius: 4,
	fill: series.get("fill"),
	stroke: root.interfaceColors.get("background"),
	strokeWidth: 2
	});

	return am5.Bullet.new(root, {
	sprite: circle
	});
	});

	createTrendLine(
	[
	{ date: "2012-01-02", value: 10 },
	{ date: "2012-01-11", value: 19 }
	],
	root.interfaceColors.get("positive")
	);

	createTrendLine(
	[
	{ date: "2012-01-17", value: 16 },
	{ date: "2012-01-22", value: 10 }
	],
	root.interfaceColors.get("negative")
	);

	function createTrendLine(data, color) {
	var series = chart.series.push(
	am5xy.LineSeries.new(root, {
	xAxis: xAxis,
	yAxis: yAxis,
	valueXField: "date",
	stroke: color,
	valueYField: "value"
	})
	);

	series.data.processor = am5.DataProcessor.new(root, {
	dateFormat: "yyyy-MM-dd",
	dateFields: ["date"]
	});

	series.data.setAll(data);
	series.appear(1000, 100);
	}

	// Add cursor
	// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
	var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
	xAxis: xAxis
	}));
	cursor.lineY.set("visible", false);

	// add scrollbar
	chart.set("scrollbarX", am5.Scrollbar.new(root, {
	orientation: "horizontal"
	}));

	// Make stuff animate on load
	// https://www.amcharts.com/docs/v5/concepts/animations/
	series.appear(1000, 100);
	chart.appear(1000, 100);

	}); // end am5.ready()
	</script>
	</body>
	</html>