angular - Stapla enskild kolumn i amcharts 4 vid hovring

Vänligen kontrollera denna stackblitz-länk

Här vid hovring kan du se ett verktygstips med olika räkningar, jag ville visa en staplad kolumn vid hovring, något liknande detta

Jag har försökt skapa en andra serie på 'över'-händelsen av första serien (samma kan ses i koden), men det fungerar inte.

Finns det ett sätt att uppnå detta i amcharts?

Svar #1

Först och främst bör du skapa ett "normalt" staplat kolumndiagram med flera serier för varje datavärde:

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "error"; // "pass", ...
series.dataFields.dateX = "date";
series.name = "Research";
series.stacked = true;

Om det fungerar kan du ställa in fill och stroke-färgen för alla serier till samma värde:

series.fill = am4core.color('#ececec');
series.stroke = am4core.color('#ececec');

Och lägg till ett hovringstillstånd, som tillämpas när du hovrar över en kolumn:

let hoverState = series.columns.template.states.create("hover");
hoverState.properties.stroke = am4core.color("red"); // change the color for each series
hoverState.properties.fill = am4core.color("red"); // change the color for each series

Här är det kompletta exemplet:

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);

chart.data = [{
  'date': new Date(2019, 4, 1),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 2),
  'itrCount': 75,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 3),
  'itrCount': 80,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 4),
  'itrCount': 250,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 5),
  'itrCount': 150,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 6),
  'itrCount': 180,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 7),
  'itrCount': 95,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 8),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 9),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 10),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 11),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 12),
  'itrCount': 47,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 13),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 14),
  'itrCount': 75,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 15),
  'itrCount': 80,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 16),
  'itrCount': 250,
  'pass': 35,
  'error': 10
}, {
  'date': new Date(2019, 4, 17),
  'itrCount': 150,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 18),
  'itrCount': 180,
  'pass': 50,
  'error': 10
}, {
  'date': new Date(2019, 4, 19),
  'itrCount': 95,
  'pass': 30,
  'error': 10
}, {
  'date': new Date(2019, 4, 20),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 21),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 22),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 23),
  'itrCount': 20,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 24),
  'itrCount': 47,
  'pass': 25,
  'error': 10
}, {
  'date': new Date(2019, 4, 25),
  'itrCount': 100,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 26),
  'itrCount': 75,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 27),
  'itrCount': 80,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 28),
  'itrCount': 250,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 29),
  'itrCount': 150,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 30),
  'itrCount': 180,
  'pass': 10,
  'error': 10
}, {
  'date': new Date(2019, 4, 31),
  'itrCount': 95,
  'pass': 10,
  'error': 10
}];

const dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.disabled = true;
dateAxis.renderer.minGridDistance = 0;
dateAxis.renderer.grid.template.location = 0.5;
dateAxis.startLocation = 0;
dateAxis.endLocation = 1;
dateAxis.dateFormats.setKey('day', 'dd');
dateAxis.cursorTooltipEnabled = false;

const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.cursorTooltipEnabled = false;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "error";
series.dataFields.dateX = "date";
series.name = "Research";
series.stacked = true;
series.fill = am4core.color('#ececec');
series.stroke = am4core.color('#ececec');

let hoverState = series.columns.template.states.create("hover");
hoverState.properties.stroke = am4core.color("red");
hoverState.properties.fill = am4core.color("red");

var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "pass";
series2.dataFields.dateX = "date";
series2.name = "Marketing";
series2.stacked = true;
series2.fill = am4core.color('#ececec');
series2.stroke = am4core.color('#ececec');

let hoverState2 = series2.columns.template.states.create("hover");
hoverState2.properties.stroke = am4core.color("green");
hoverState2.properties.fill = am4core.color("green");

var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueY = "itrCount";
series3.dataFields.dateX = "date";
series3.name = "Sales";
series3.stacked = true;
series3.fill = am4core.color('#ececec');
series3.stroke = am4core.color('#ececec');

let hoverState3 = series3.columns.template.states.create("hover");
hoverState3.properties.stroke = am4core.color("blue");
hoverState3.properties.fill = am4core.color("blue");

series3.tooltip.getFillFromObject = false;
series3.tooltip.background.fill = am4core.color('#fff');
series3.tooltip.label.fill = am4core.color('#000');
series3.columns.template.tooltipY = 0;
series3.columns.template.tooltipText = 'Series: {name}\nDate: {date}\nCount: {itrCount}\nPass: {pass}\nFail: {error}';

chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.disabled = true;
chart.cursor.lineY.disabled = true;
#chartdiv {
  width: 100%;
  height: 500px;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

Du kan också fork:a och redigera denna code pen. Här är en skärmdump av resultatet:

Du kanske vill överväga några fler saker:

  • För att lägga till en skugga i hovringsläget kan du skapa ett filter och lägga till ett DropShadowFilter
  • För att förbättra din tooltip kan du ta en titt på chart.tooltipHTML eller följa den här guiden
  • Jag skulle inte rekommendera att använda series2.columns.template.width=am4core.percent(100); eftersom det kan resultera i vissa överlappande SVG-buggar: