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>
    <script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script>
    <style>
        #chartdiv {
          width: 600PX;
          height: 350px;
        }
    </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");
        
        const myTheme = am5.Theme.new(root);
        
        myTheme.rule("AxisLabel", ["minor"]).setAll({
          dy:1
        });
        
        // Set themes
        // https://www.amcharts.com/docs/v5/concepts/themes/
        root.setThemes([
          am5themes_Animated.new(root),
          myTheme,
          am5themes_Responsive.new(root)
        ]);
        
        // Create chart
        // https://www.amcharts.com/docs/v5/charts/xy-chart/
        var chart = root.container.children.push(am5xy.XYChart.new(root, {
          panX: false,
          panY: false,
          wheelX: "panX",
          wheelY: "zoomX",
          paddingLeft:0
        }));
        
        // Add cursor
        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
          behavior: "zoomX"
        }));
        cursor.lineY.set("visible", false);
        
        var date = new Date();
        date.setHours(0, 0, 0, 0);
        var value = 100;
        
        function generateData() {
          value = Math.round((Math.random() * 10 - 5) + value);
          am5.time.add(date, "day", 1);
          return {
            date: date.getTime(),
            value: value
          };
        }
        
        function generateDatas(count) {
          var data = [];
          for (var i = 0; i < count; ++i) {
            data.push(generateData());
          }
          return data;
        }
        
        // Create axes
        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
          maxDeviation: 0,
          baseInterval: {
            timeUnit: "day",
            count: 1
          },
          renderer: am5xy.AxisRendererX.new(root, {
            minorGridEnabled:true,
            minorLabelsEnabled:true
          }),
          tooltip: am5.Tooltip.new(root, {})
        }));
        
        xAxis.set("minorDateFormats", {
          "day":"dd",
          "month":"MM"
        });
        
        var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
          renderer: am5xy.AxisRendererY.new(root, {})
        }));
        
        // Add series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        var series = chart.series.push(am5xy.ColumnSeries.new(root, {
          name: "Series",
          xAxis: xAxis,
          yAxis: yAxis,
          valueYField: "value",
          valueXField: "date",
          tooltip: am5.Tooltip.new(root, {
            labelText: "{valueY}"
          })
        }));
        
        series.columns.template.setAll({ strokeOpacity: 0 })
        
        // Add scrollbar
        // https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
        chart.set("scrollbarX", am5.Scrollbar.new(root, {
          orientation: "horizontal"
        }));
        
        var data = generateDatas(30);
        series.data.setAll(data);
        
        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        series.appear(1000);
        chart.appear(1000, 100);
        
        }); // end am5.ready()
    </script>
  </body>
</html>

效果图

点击查看详情

posted @ 2024-04-26 15:54 DogLeftover 阅读(18) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

相关博文：

· amCharts丛集柱形图

· amCharts绘制100%堆叠柱形图

· echarts 柱形图

· echarts之柱状图实现例一

· 简单的可视化图表——“柱状图”

阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术

历史上的今天：
2022-04-26 Mybatis入门（五）：缓存
2022-04-26 Mybatis入门（四）：动态sql
2022-04-26 idea不能识别yaml文件
2022-04-26 docker容器通讯

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>
	<script src="https://cdn.amcharts.com/lib/5/themes/Responsive.js"></script>
	<style>
	#chartdiv {
	width: 600PX;
	height: 350px;
	}
	</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");

	const myTheme = am5.Theme.new(root);

	myTheme.rule("AxisLabel", ["minor"]).setAll({
	dy:1
	});

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

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

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

	var date = new Date();
	date.setHours(0, 0, 0, 0);
	var value = 100;

	function generateData() {
	value = Math.round((Math.random() * 10 - 5) + value);
	am5.time.add(date, "day", 1);
	return {
	date: date.getTime(),
	value: value
	};
	}

	function generateDatas(count) {
	var data = [];
	for (var i = 0; i < count; ++i) {
	data.push(generateData());
	}
	return data;
	}

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

	xAxis.set("minorDateFormats", {
	"day":"dd",
	"month":"MM"
	});

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

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

	series.columns.template.setAll({ strokeOpacity: 0 })

	// Add scrollbar
	// https://www.amcharts.com/docs/v5/charts/xy-chart/scrollbars/
	chart.set("scrollbarX", am5.Scrollbar.new(root, {
	orientation: "horizontal"
	}));

	var data = generateDatas(30);
	series.data.setAll(data);

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

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