javascript - Amcharts-如何水平对齐多个系列的圆形气泡

问题描述

我想为不同的字段绘制一个带有气泡的热图，如下图所示，每年水平对齐。

这是代码笔（buble amcharts）

但是，在 amcharts 阅读了很多文档后，我仍然卡住了。我使用以下代码为每个字段创建了 5 个系列：

 let chart = am4core.create(title, am4charts.XYChart);
 chart.maskBullets = false;

// Add data
chart.data = [{
  "value1": 8.4,
  "value2": 1,
  "value3": 0,
  "quarter": "q1",
  "year": "2011"
}, {
   "value1": 13,
  "value2": 4,
  "value3": 0,
  "quarter": "q2",
  "year": "2011"
}, {
   "value1": 28,
  "value2": 13,
  "value3": 10,
  "quarter": "q3",
  "year": "2011"
}, {
   "value1": 5.6,
  "value2": 4,
  "value3": 1,
  "quarter": "q4",
  "year": "2011"
}, {
  "value1": 4,
  "value2": 12,
  "value3": 2,
  "quarter": "q1",
  "year": "2012"
}, {
   "value1": 16,
  "value2": 5,
  "value3": 3,
  "quarter": "q2",
  "year": "2012"
}, {
   "value1": 19,
  "value2": 8,
  "value3": 6,
  "quarter": "q3",
  "year": "2012"
}, {
  "value1": 8.4,
  "value2": 1,
  "value3": 0,
  "quarter": "q4",
  "year": "2012"
}, {
  "value1": 4,
  "value2": 12,
  "value3": 2,
  "quarter": "q1",
  "year": "2013"
}, {
   "value1": 16,
  "value2": 5,
  "value3": 3,
  "quarter": "q2",
  "year": "2013"
}, {
   "value1": 19,
  "value2": 8,
  "value3": 6,
  "quarter": "q3",
  "year": "2013"
}, {
  "value1": 8.4,
  "value2": 1,
  "value3": 0,
  "quarter": "q4",
  "year": "2013"
}
];

    let xAxis = chart.xAxes.push(new am4charts.CategoryAxis());

    let yAxis = chart.yAxes.push(new am4charts.CategoryAxis());

    yAxis.dataFields.category = "year";
    xAxis.dataFields.category = "quarter";
    
    // configure grid
    yAxis.renderer.grid.template.location = 0;
    xAxis.renderer.grid.template.location = 0;
    // configure labels
    xAxis.renderer.minGridDistance =30;
    
    yAxis.renderer.minGridDistance =30;
    xAxis.renderer.labels.template.location = 0.5;
    yAxis.renderer.labels.template.location=0.5;

    // alternating axis fills
    xAxis.renderer.axisFills.template.disabled = false;
    xAxis.renderer.axisFills.template.fillOpacity = 0.1;
    xAxis.renderer.axisFills.template.fill = am4core.color("grey");
 
 function createSeries(category, color, name):any {
      let series = chart.series.push(new am4charts.ColumnSeries());
      series.name = name;
      series.dataFields.categoryY = "year";
      series.dataFields.categoryX = "quarter";
      series.dataFields.value = category;
      series.columns.template.disabled = true;
      series.sequencedInterpolation = true;
      series.defaultState.transitionDuration = 3000;
      
      let circleBullet = series.bullets.push(new am4core.Circle());
      circleBullet.tooltipText = tooltiptext;
      circleBullet.fill = am4core.color(color);
      circleBullet.strokeOpacity = 0.2;
      circleBullet.fillOpacity = 0.8;
      circleBullet.y = 0.5;

      series.heatRules.push({property:"radius", target:circleBullet, min:1, max:12});
      return series;
    }

    let series1 = createSeries("value1","#ffc947","#Series-avgT");
    let series2 =  createSeries("value2","#f5a962","#Series-cT>30°C");
    let series3 = createSeries("value3","#3c8dad", "#Series-cT<0°C");

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px
}

<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>
<div id="chartdiv"></div>

该系列在上方移动，如下图所示。如何让它们对齐 y 轴？非常感谢你。

标签： javascriptangularamcharts

javascript - Amcharts-如何水平对齐多个系列的圆形气泡

问题描述

解决方案

推荐阅读