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)
        ]);
        
        
        // Create chart
        // https://www.amcharts.com/docs/v5/charts/xy-chart/
        var chart = root.container.children.push(am5xy.XYChart.new(root, {
          panX: true,
          panY: true,
          wheelX: "panX",
          wheelY: "zoomX",
          pinchZoomX:true
        }));
        
        chart.get("colors").set("step", 3);
        
        
        // Add cursor
        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {}));
        cursor.lineY.set("visible", false);
        
        
        // Create axes
        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
          maxDeviation: 0.3,
          baseInterval: {
            timeUnit: "day",
            count: 1
          },
          renderer: am5xy.AxisRendererX.new(root, { minorGridEnabled: true }),
          tooltip: am5.Tooltip.new(root, {})
        }));
        
        var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
          maxDeviation: 0.3,
          renderer: am5xy.AxisRendererY.new(root, {})
        }));
        
        
        // Add series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        var series = chart.series.push(am5xy.LineSeries.new(root, {
          name: "Series 1",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "value1",
          valueXField: "date",
          tooltip: am5.Tooltip.new(root, {
            labelText: "{valueX}: {valueY}\n{previousDate}: {value2}"
          })
        }));
        
        series.strokes.template.setAll({
          strokeWidth: 2
        });
        
        series.get("tooltip").get("background").set("fillOpacity", 0.5);
        
        var series2 = chart.series.push(am5xy.LineSeries.new(root, {
          name: "Series 2",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "value2",
          valueXField: "date"
        }));
        series2.strokes.template.setAll({
          strokeDasharray: [2, 2],
          strokeWidth: 2
        });
        
        // Set date fields
        // https://www.amcharts.com/docs/v5/concepts/data/#Parsing_dates
        root.dateFormatter.setAll({
          dateFormat: "yyyy-MM-dd",
          dateFields: ["valueX"]
        });
        
        
        // Set data
        var data = [{
          date: new Date(2019, 5, 12).getTime(),
          value1: 50,
          value2: 48,
          previousDate: new Date(2019, 5, 5)
        }, {
          date: new Date(2019, 5, 13).getTime(),
          value1: 53,
          value2: 51,
          previousDate: "2019-05-06"
        }, {
          date: new Date(2019, 5, 14).getTime(),
          value1: 56,
          value2: 58,
          previousDate: "2019-05-07"
        }, {
          date: new Date(2019, 5, 15).getTime(),
          value1: 52,
          value2: 53,
          previousDate: "2019-05-08"
        }, {
          date: new Date(2019, 5, 16).getTime(),
          value1: 48,
          value2: 44,
          previousDate: "2019-05-09"
        }, {
          date: new Date(2019, 5, 17).getTime(),
          value1: 47,
          value2: 42,
          previousDate: "2019-05-10"
        }, {
          date: new Date(2019, 5, 18).getTime(),
          value1: 59,
          value2: 55,
          previousDate: "2019-05-11"
        }]
        
        series.data.setAll(data);
        series2.data.setAll(data);
        
        
        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        series.appear(1000);
        series2.appear(1000);
        chart.appear(1000, 100);
        
        }); // end am5.ready()
    </script>        
  </body>
</html>

效果图

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

刷新页面返回顶部

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

相关博文：

· amCharts绘制带趋势线折线图

· amCharts绘制折线图尾部动画

· android折线图的实现

· QChart的折线图

· Qt图表绘制（QtCharts）-绘制简单的折线图（5）原创

阅读排行：
· 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)
	]);


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

	chart.get("colors").set("step", 3);


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


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

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


	// Add series
	// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
	var series = chart.series.push(am5xy.LineSeries.new(root, {
	name: "Series 1",
	xAxis: xAxis,
	yAxis: yAxis,
	valueYField: "value1",
	valueXField: "date",
	tooltip: am5.Tooltip.new(root, {
	labelText: "{valueX}: {valueY}\n{previousDate}: {value2}"
	})
	}));

	series.strokes.template.setAll({
	strokeWidth: 2
	});

	series.get("tooltip").get("background").set("fillOpacity", 0.5);

	var series2 = chart.series.push(am5xy.LineSeries.new(root, {
	name: "Series 2",
	xAxis: xAxis,
	yAxis: yAxis,
	valueYField: "value2",
	valueXField: "date"
	}));
	series2.strokes.template.setAll({
	strokeDasharray: [2, 2],
	strokeWidth: 2
	});

	// Set date fields
	// https://www.amcharts.com/docs/v5/concepts/data/#Parsing_dates
	root.dateFormatter.setAll({
	dateFormat: "yyyy-MM-dd",
	dateFields: ["valueX"]
	});


	// Set data
	var data = [{
	date: new Date(2019, 5, 12).getTime(),
	value1: 50,
	value2: 48,
	previousDate: new Date(2019, 5, 5)
	}, {
	date: new Date(2019, 5, 13).getTime(),
	value1: 53,
	value2: 51,
	previousDate: "2019-05-06"
	}, {
	date: new Date(2019, 5, 14).getTime(),
	value1: 56,
	value2: 58,
	previousDate: "2019-05-07"
	}, {
	date: new Date(2019, 5, 15).getTime(),
	value1: 52,
	value2: 53,
	previousDate: "2019-05-08"
	}, {
	date: new Date(2019, 5, 16).getTime(),
	value1: 48,
	value2: 44,
	previousDate: "2019-05-09"
	}, {
	date: new Date(2019, 5, 17).getTime(),
	value1: 47,
	value2: 42,
	previousDate: "2019-05-10"
	}, {
	date: new Date(2019, 5, 18).getTime(),
	value1: 59,
	value2: 55,
	previousDate: "2019-05-11"
	}]

	series.data.setAll(data);
	series2.data.setAll(data);


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

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