Amcharts-如何水平对齐多个系列的圆形气泡
Amcharts- how to align multiple series of circle bubbles horizontally
我想为不同的字段绘制一个带有气泡的热图,如下图所示,每年水平对齐。
这是代码笔(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 轴?非常感谢。
我也在 github 的 Amcharts 中发布了这个问题。有人帮我解决了一个绕行技巧。而不是 y 轴作为类别轴,最好将 y 轴作为值轴。然后我们可以设置y轴的值。
yAxis.maxPrecision = 0
yAxis.min = 2010.5
yAxis.max = 2013.5
yAxis.strictMinMax = true;
本期link如下:question in 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 轴?非常感谢。
我也在 github 的 Amcharts 中发布了这个问题。有人帮我解决了一个绕行技巧。而不是 y 轴作为类别轴,最好将 y 轴作为值轴。然后我们可以设置y轴的值。
yAxis.maxPrecision = 0
yAxis.min = 2010.5
yAxis.max = 2013.5
yAxis.strictMinMax = true;
本期link如下:question in amcharts