Amchart（四）折柱混合图

<!DOCTYPE html>
<html>
  <head>
    	<meta charset="UTF-8" />
    	<title>折柱混合图</title>
    	<link rel="stylesheet" href="index.css" />
  </head>
  	<body>
    		<div id="chartdiv"></div>
				<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>
    		<script>
    				am4core.useTheme(am4themes_animated);
						var chart = am4core.create("chartdiv", am4charts.XYChart);
						var data = [];
						chart.data = [{
						    "year": "2014",
						    "income": 23.5,
						    "expenses": 21.1
						}, {
						    "year": "2015",
						    "income": 26.2,
						    "expenses": 30.5
						}, {
						    "year": "2016",
						    "income": 30.1,
						    "expenses": 34.9
						}, {
						    "year": "2017",
						    "income": 20.5,
						    "expenses": 23.1
						}, {
						    "year": "2018",
						    "income": 30.6,
						    "expenses": 28.2
						}, {
						    "year": "2019",
						    "income": 34.1,
						    "expenses": 31.9,
						    "stroke": "3,3",
						    "opacity": 0.5
						}];
						
						var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
						categoryAxis.renderer.grid.template.location = 0;
						categoryAxis.renderer.ticks.template.disabled = true;
						categoryAxis.renderer.line.opacity = 0;
						categoryAxis.renderer.grid.template.disabled = true;
						categoryAxis.renderer.minGridDistance = 40;
						categoryAxis.dataFields.category = "year";
						
						
						var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
						valueAxis.tooltip.disabled = true;
						valueAxis.renderer.line.opacity = 0;
						valueAxis.renderer.ticks.template.disabled = true;
						valueAxis.min = 0;
						
						var columnSeries = chart.series.push(new am4charts.ColumnSeries());
						columnSeries.dataFields.categoryX = "year";
						columnSeries.dataFields.valueY = "expenses";
						columnSeries.tooltipText = "expenses: {valueY.value}";
						columnSeries.sequencedInterpolation = true;
						columnSeries.defaultState.transitionDuration = 1500;
						columnSeries.fill = chart.colors.getIndex(4);
						
						var columnTemplate = columnSeries.columns.template;
						columnTemplate.column.cornerRadiusTopLeft = 10;
						columnTemplate.column.cornerRadiusTopRight = 10;
						columnTemplate.strokeWidth = 1;
						columnTemplate.strokeOpacity = 1;
						columnTemplate.stroke = columnSeries.fill;
						
						var desaturateFilter = new am4core.DesaturateFilter();
						desaturateFilter.saturation = 0.5;
						
						columnTemplate.filters.push(desaturateFilter);
						
						// first way - get properties from data. but can only be done with columns, as they are separate objects.    
						columnTemplate.propertyFields.strokeDasharray = "stroke";
						columnTemplate.propertyFields.fillOpacity = "opacity";
						
						// add some cool saturation effect on hover
						var desaturateFilterHover = new am4core.DesaturateFilter();
						desaturateFilterHover.saturation = 1;
						
						var hoverState = columnTemplate.states.create("hover");
						hoverState.transitionDuration = 2000;
						hoverState.filters.push(desaturateFilterHover);
						
						var lineSeries = chart.series.push(new am4charts.LineSeries());
						lineSeries.dataFields.categoryX = "year";
						lineSeries.dataFields.valueY = "income";
						lineSeries.tooltipText = "income: {valueY.value}";
						lineSeries.sequencedInterpolation = true;
						lineSeries.defaultState.transitionDuration = 1500;
						lineSeries.stroke = chart.colors.getIndex(11);
						lineSeries.fill = lineSeries.stroke;
						lineSeries.strokeWidth = 2;
						
						// second way - add axis range.
						var lineSeriesRange = categoryAxis.createSeriesRange(lineSeries);
						lineSeriesRange.category = "2018";
						lineSeriesRange.endCategory = "2019";
						lineSeriesRange.contents.strokeDasharray = "3,3";
						lineSeriesRange.locations.category = 0.5;
						
						var bullet = lineSeries.bullets.push(new am4charts.CircleBullet());
						bullet.fill = lineSeries.stroke;
						bullet.circle.radius = 4;
						
						chart.cursor = new am4charts.XYCursor();
						chart.cursor.behavior = "none";
						chart.cursor.lineX.opacity = 0;
						chart.cursor.lineY.opacity = 0;
    		</script>
  	</body>
</html>
Amchart全部示例 github地址别忘了点个小星星
Amchart（四）折柱混合图

猜你喜欢
