| <!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" |
| }]; |
| |
| |
| |
| var root = am5.Root.new("chartdiv"); |
| |
| |
| |
| root.setThemes([ |
| am5themes_Animated.new(root) |
| ]); |
| |
| |
| |
| |
| 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); |
| |
| |
| |
| 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 |
| })); |
| |
| |
| |
| 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 }); |
| |
| |
| |
| 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 }); |
| |
| |
| |
| 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 |
| }); |
| }); |
| |
| |
| |
| 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); |
| |
| |
| |
| distanceSeries.appear(1000); |
| chart.appear(1000, 100); |
| |
| }); |
| </script> |
| </body> |
| </html> |
- 效果图

· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
2021-05-30 spring boot纯注解开发模板