<!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() {
var data = [{
"date": "2012-01-01",
"distance": 227,
"townName": "New York",
"townSize": 12, // 氣泡大小
"latitude": 40.71,
"duration": 408 // 持續時間
}, {
"date": "2012-01-02",
"distance": 371,
"townName": "Washington",
"townSize": 7,
"latitude": 38.89,
"duration": 482
}, {
"date": "2012-01-03",
"distance": 433,
"townName": "Wilmington",
"townSize": 3,
"latitude": 34.22,
"duration": 562
}, {
"date": "2012-01-04",
"distance": 345,
"townName": "Jacksonville",
"townSize": 3.5,
"latitude": 30.35,
"duration": 379
}, {
"date": "2012-01-05",
"distance": 480,
"townName": "Miami",
"townSize": 5,
"latitude": 25.83,
"duration": 501
}, {
"date": "2012-01-06",
"distance": 386,
"townName": "Tallahassee",
"townSize": 3.5,
"latitude": 30.46,
"duration": 443
}, {
"date": "2012-01-07",
"distance": 348,
"townName": "New Orleans",
"townSize": 5,
"latitude": 29.94,
"duration": 405
}, {
"date": "2012-01-08",
"distance": 238,
"townName": "Houston",
"townSize": 8,
"latitude": 29.76,
"duration": 309
}, {
"date": "2012-01-09",
"distance": 218,
"townName": "Dalas",
"townSize": 8,
"latitude": 32.8,
"duration": 287
}, {
"date": "2012-01-10",
"distance": 349,
"townName": "Oklahoma City",
"townSize": 5,
"latitude": 35.49,
"duration": 485
}, {
"date": "2012-01-11",
"distance": 603,
"townName": "Kansas City",
"townSize": 5,
"latitude": 39.1,
"duration": 890
}, {
"date": "2012-01-12",
"distance": 534,
"townName": "Denver",
"townSize": 9,
"latitude": 39.74,
"duration": 810
}, {
"date": "2012-01-13",
"townName": "Salt Lake City",
"townSize": 6,
"distance": 425,
"duration": 670,
"latitude": 40.75,
"dashLength": 8,
"alpha": 0.4
}, {
"date": "2012-01-14",
"latitude": 36.1,
"duration": 470,
"townName": "Las Vegas"
}, {
"date": "2012-01-15"
}, {
"date": "2012-01-16"
}, {
"date": "2012-01-17"
}];
// 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: false,
panY: false,
wheelY: "none"
}));
chart.zoomOutButton.set("forceHidden", true);
chart.get("colors").set("step", 2);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {
minGridDistance: 70,
minorGridEnabled: true
}),
tooltip: am5.Tooltip.new(root, {})
}));
var distanceAxisRenderer = am5xy.AxisRendererY.new(root, {});
distanceAxisRenderer.grid.template.set("forceHidden", true);
var distanceAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: distanceAxisRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
var latitudeAxisRenderer = am5xy.AxisRendererY.new(root, {});
latitudeAxisRenderer.grid.template.set("forceHidden", true);
var latitudeAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: latitudeAxisRenderer,
forceHidden: true
}));
var durationAxisRenderer = am5xy.AxisRendererY.new(root, {
opposite: true
});
durationAxisRenderer.grid.template.set("forceHidden", true);
var durationAxis = chart.yAxes.push(am5xy.DurationAxis.new(root, {
baseUnit:"minute",
renderer: durationAxisRenderer,
extraMax:0.3
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var distanceSeries = chart.series.push(am5xy.ColumnSeries.new(root, {
xAxis: xAxis,
yAxis: distanceAxis,
valueYField: "distance",
valueXField: "date",
tooltip:am5.Tooltip.new(root, {
labelText:"{valueY} miles"
})
}));
distanceSeries.data.processor = am5.DataProcessor.new(root, {
dateFields: ["date"],
dateFormat: "yyyy-MM-dd"
});
var latitudeSeries = chart.series.push(am5xy.LineSeries.new(root, {
xAxis: xAxis,
yAxis: latitudeAxis,
valueYField: "latitude",
valueXField: "date",
tooltip:am5.Tooltip.new(root, {
labelText:"latitude: {valueY} ({townName})"
})
}));
latitudeSeries.strokes.template.setAll({ strokeWidth: 2 });
// Add circle bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
latitudeSeries.bullets.push(function() {
var graphics = am5.Circle.new(root, {
strokeWidth: 2,
radius: 5,
stroke: latitudeSeries.get("stroke"),
fill: root.interfaceColors.get("background"),
});
graphics.adapters.add("radius", function(radius, target) {
return target.dataItem.dataContext.townSize;
})
return am5.Bullet.new(root, {
sprite: graphics
});
});
var durationSeries = chart.series.push(am5xy.LineSeries.new(root, {
xAxis: xAxis,
yAxis: durationAxis,
valueYField: "duration",
valueXField: "date",
tooltip:am5.Tooltip.new(root, {
labelText:"duration: {valueY.formatDuration()}"
})
}));
durationSeries.strokes.template.setAll({ strokeWidth: 2 });
// Add circle bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
durationSeries.bullets.push(function() {
var graphics = am5.Rectangle.new(root, {
width:10,
height:10,
centerX:am5.p50,
centerY:am5.p50,
fill: durationSeries.get("stroke")
});
return am5.Bullet.new(root, {
sprite: graphics
});
});
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
chart.set("cursor", am5xy.XYCursor.new(root, {
xAxis: xAxis,
yAxis: distanceAxis
}));
distanceSeries.data.setAll(data);
latitudeSeries.data.setAll(data);
durationSeries.data.setAll(data);
xAxis.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
distanceSeries.appear(1000);
chart.appear(1000, 100);
}); // end am5.ready()
</script>
</body>
</html>
- 效果圖
