首页 > 其他分享 >amCharts绘制带趋势线折线图

amCharts绘制带趋势线折线图

时间:2024-05-30 15:12:42浏览次数:19  
标签:01 root value date amCharts 折线图 new 绘制 2012

  • 代码案例
<!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)
        ]);
        
        root.dateFormatter.setAll({
          dateFormat: "yyyy",
          dateFields: ["valueX"]
        });
        
        var data = [
          {
            date: "2012-01-01",
            value: 8
          },
          {
            date: "2012-01-02",
            value: 10
          },
          {
            date: "2012-01-03",
            value: 12
          },
          {
            date: "2012-01-04",
            value: 14
          },
          {
            date: "2012-01-05",
            value: 11
          },
          {
            date: "2012-01-06",
            value: 6
          },
          {
            date: "2012-01-07",
            value: 7
          },
          {
            date: "2012-01-08",
            value: 9
          },
          {
            date: "2012-01-09",
            value: 13
          },
          {
            date: "2012-01-10",
            value: 15
          },
          {
            date: "2012-01-11",
            value: 19
          },
          {
            date: "2012-01-12",
            value: 21
          },
          {
            date: "2012-01-13",
            value: 22
          },
          {
            date: "2012-01-14",
            value: 20
          },
          {
            date: "2012-01-15",
            value: 18
          },
          {
            date: "2012-01-16",
            value: 14
          },
          {
            date: "2012-01-17",
            value: 16
          },
          {
            date: "2012-01-18",
            value: 18
          },
          {
            date: "2012-01-19",
            value: 17
          },
          {
            date: "2012-01-20",
            value: 15
          },
          {
            date: "2012-01-21",
            value: 12
          },
          {
            date: "2012-01-22",
            value: 10
          },
          {
            date: "2012-01-23",
            value: 8
          }
        ];
        
        // Create chart
        // https://www.amcharts.com/docs/v5/charts/xy-chart/
        var chart = root.container.children.push(
          am5xy.XYChart.new(root, {
            focusable: true,
            panX: true,
            panY: true,
            wheelX: "panX",
            wheelY: "zoomX",
            pinchZoomX: true,
            paddingLeft: 0
          })
        );
        
        var easing = am5.ease.linear;
        
        // Create axes
        // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
        var xAxis = chart.xAxes.push(
          am5xy.DateAxis.new(root, {
            maxDeviation: 0.5,
            groupData: false,
            baseInterval: {
              timeUnit: "day",
              count: 1
            },
            renderer: am5xy.AxisRendererX.new(root, {
              pan: "zoom",
              minGridDistance: 70,
              minorGridEnabled: true
            }),
            tooltip: am5.Tooltip.new(root, {})
          })
        );
        
        var yAxis = chart.yAxes.push(
          am5xy.ValueAxis.new(root, {
            maxDeviation: 1,
            renderer: am5xy.AxisRendererY.new(root, { pan: "zoom" })
          })
        );
        
        // Add series
        // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
        var series = chart.series.push(
          am5xy.LineSeries.new(root, {
            minBulletDistance: 10,
            xAxis: xAxis,
            yAxis: yAxis,
            valueYField: "value",
            valueXField: "date",
            tooltip: am5.Tooltip.new(root, {
              pointerOrientation: "horizontal",
              labelText: "{valueY}"
            })
          })
        );
        
        // Set up data processor to parse string dates
        // https://www.amcharts.com/docs/v5/concepts/data/#Pre_processing_data
        series.data.processor = am5.DataProcessor.new(root, {
          dateFormat: "yyyy-MM-dd",
          dateFields: ["date"]
        });
        
        series.data.setAll(data);
        
        series.bullets.push(function () {
          var circle = am5.Circle.new(root, {
            radius: 4,
            fill: series.get("fill"),
            stroke: root.interfaceColors.get("background"),
            strokeWidth: 2
          });
        
          return am5.Bullet.new(root, {
            sprite: circle
          });
        });
        
        createTrendLine(
          [
            { date: "2012-01-02", value: 10 },
            { date: "2012-01-11", value: 19 }
          ],
          root.interfaceColors.get("positive")
        );
        
        createTrendLine(
          [
            { date: "2012-01-17", value: 16 },
            { date: "2012-01-22", value: 10 }
          ],
          root.interfaceColors.get("negative")
        );
        
        function createTrendLine(data, color) {
          var series = chart.series.push(
            am5xy.LineSeries.new(root, {
              xAxis: xAxis,
              yAxis: yAxis,
              valueXField: "date",
              stroke: color,
              valueYField: "value"
            })
          );
        
          series.data.processor = am5.DataProcessor.new(root, {
            dateFormat: "yyyy-MM-dd",
            dateFields: ["date"]
          });
        
          series.data.setAll(data);
          series.appear(1000, 100);
        }
        
        // Add cursor
        // https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
        var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
          xAxis: xAxis
        }));
        cursor.lineY.set("visible", false);
        
        // add scrollbar
        chart.set("scrollbarX", am5.Scrollbar.new(root, {
          orientation: "horizontal"
        }));
        
        // Make stuff animate on load
        // https://www.amcharts.com/docs/v5/concepts/animations/
        series.appear(1000, 100);
        chart.appear(1000, 100);
        
        }); // end am5.ready()
    </script>        
  </body>
</html>
  • 效果图

标签:01,root,value,date,amCharts,折线图,new,绘制,2012
From: https://www.cnblogs.com/dogleftover/p/18222409

相关文章

  • amCharts绘制折线图尾部动画
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • amCharts绘制折线图和柱状图混合
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • amCharts绘制堆叠面积图
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • amCharts绘制折线图比较
    代码案例<!DOCTYPEhtml><html><head><scriptsrc="https://cdn.amcharts.com/lib/5/index.js"></script><scriptsrc="https://cdn.amcharts.com/lib/5/xy.js"></script><scriptsrc=&qu......
  • 地质灾害风险地图:如何用GIS与Python绘制
    地质灾害是指全球地壳自然地质演化过程中,由于地球内动力、外动力或者人为地质动力作用下导致的自然地质和人类的自然灾害突发事件。由于降水、地震等自然作用下,地质灾害在世界范围内频繁发生。我国除滑坡灾害外,还包括崩塌、泥石流、地面沉降等各种地质灾害,具有类型多样、分......
  • Highcharts绘制饼图
    代码案例<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>HighchartsExa......
  • AnyChart绘制折线图
    代码案例<html><head><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script><scriptsrc="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script......
  • 使用python绘制一个五颜六色的爱心
    使用python绘制一个五颜六色的爱心介绍效果代码介绍使用numpy与matplotlib绘制一个七彩爱心!效果代码importnumpyasnpimportmatplotlib.pyplotasplt#Heartshapefunctiondefheart_shape(t):x=16*np.sin(t)**3y=13*np.cos(t)-5*......
  • 统计不同文件夹中的文件数量,并绘制相应的柱状图。
    一、数据类型每个文件夹下都是这种文件,虽然可以通过手动数出来了解文件数量,但为了更直观地看到每个文件夹的文件数量,可以使用图表来表示,这样会更加清晰。效果展示:  二、代码实现 importosimportmatplotlib.pyplotaspltfolder_names=['0','1','2','3']......
  • Cesium4Unreal - # 002 线图元绘制
    文章目录基础点绘制1思路2步骤2.1创建一个自定义组件2.2重写CreateSceneProxy方法2.3实现自定义的场景代理类2.4在场景代理类中实现绘制逻辑2.5使用自定义组件3代码实现3.1c++代码3.1.1自定义组件代码MyPrimitivePointComponent.hMyPri......