AmCharts 上下联动的图表

最新推荐文章于 2021-07-17 10:11:29 发布

yzhSWJ

最新推荐文章于 2021-07-17 10:11:29 发布

阅读量312

点赞数

分类专栏： js ECharts

本文链接：https://blog.csdn.net/yuzheh521/article/details/114706805

版权

js 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

ECharts

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css"/>
<!-- Resources -->
<script src="js/core.js"></script>
<script src="js/charts.js"></script>
<script src="js/animated.js"></script>


    <style>
        #chartdiv {
          width: 100%;
          height: 600px;
        }
        </style>
</head>
<body>
    <div id="chartdiv"></div>
</body>
<script>
    am4core.ready(function() {
   

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end
    
    //am4charts.XYChar  什么类型的图表(饼图,线图,XY图表)
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    
    var data = [];//数据
    var price = 0;
    var a="x"
    for (var i = 0; i < 10; i++) {
        a=a+i
        price =i
       
        data.push({ x: a, y: price });
    }
    var interfaceColors = new am4core.InterfaceColorSet();
    //图表数据 键值对[{key:value},{}] 
    chart.data = data;
    // the following line makes value axes to be arranged vertically.
    chart.leftAxesContainer.layout = "vertical";
    
    // uncomment this line if you want to change order of axes
    //chart.bottomAxesContainer.reverseOrder = true;
    
    //x轴
    var dateAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    //x轴数据
    dateAxis.dataFields.category = "x";

    dateAxis.renderer.grid.template.location = 0;
    dateAxis.renderer.ticks.template.length = 8;
    dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
    dateAxis.renderer.grid.template.disabled = true;
    dateAxis.renderer.ticks.template.disabled = false;
    dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
    
    // 这两条线使轴最初被放大

    //dateAxis.start = 0.7;
    //dateAxis.keepSelection = true;
    
  
 
  //y轴
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;
    valueAxis.zIndex = 1;
    valueAxis.renderer.baseGrid.disabled = true;
    // Set up axis
    valueAxis.renderer.inside = true;
    valueAxis.height = am4core.percent(60);
    valueAxis.renderer.labels.template.verticalCenter = "bottom";
    valueAxis.renderer.labels.template.padding(2,2,2,2);
    //valueAxis.renderer.maxLabelPosition = 0.95;
    valueAxis.renderer.fontSize = "0.8em"

    
    //添加数据1 线性表
    var series = chart.series.push(new am4charts.LineSeries());
    // x轴上的 value值 
    series.dataFields.valueY  = "y";
    series.dataFields.categoryX  = "x";
    //鼠标悬停显示
    series.tooltipText = "{valueY.value}";
    series.name = "Series 1";
    
    //y轴 第二个y轴
    var valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis2.tooltip.disabled = true;

    // this makes gap between panels
    //这使得面板之间产生间隙
    valueAxis2.marginTop = 100;
    valueAxis2.renderer.baseGrid.disabled = true;
    valueAxis2.renderer.inside = true;
    valueAxis2.height = am4core.percent(40);
    valueAxis2.zIndex = 3
    valueAxis2.renderer.labels.template.verticalCenter = "bottom";
    valueAxis2.renderer.labels.template.padding(2,2,2,2);
    //valueAxis2.renderer.maxLabelPosition = 0.95;
    valueAxis2.renderer.fontSize = "0.8em"
    

   
    //数据2 柱状图
    var series2 = chart.series.push(new am4charts.ColumnSeries());
    series2.columns.template.width = am4core.percent(50);
    series2.dataFields.valueY  = "y";
    series2.dataFields.categoryX  = "x";
    series2.yAxis = valueAxis2;
    series2.tooltipText = "{valueY.value}";
    series2.name = "Series 2";

    //放大做小数据用
    chart.cursor = new am4charts.XYCursor();
    chart.cursor.xAxis = dateAxis;
    
    
    }); // end am4core.ready()


    </script>
    
</html>

yzhSWJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AmCharts 上下联动的图表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="font/ic.
复制链接

扫一扫