Мне нужна помощь с этим знаменитым плагином. Я использую диаграмму «Диаграмма с накоплением столбцов» для создания «Диаграммы Мекко», потому что в v4 не является родным. Я сделал это, но я не знаю, как реализовать динамическую c ширину на основе серии.
Вот код:
function am4themes_colorRiskScore(target) {
if (target instanceof am4core.ColorSet) {
target.list = [
am4core.color("#D6EAD6"),
am4core.color("#D6EBC1"),
am4core.color("#FAF3BA"),
am4core.color("#FAE3C9"),
am4core.color("#EDC8CC"),
am4core.color("#000000")
];
}
}
am4core.useTheme(am4themes_colorRiskScore);
var chart = am4core.create("mekkochart", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in
chart.data = [];
chart.padding(30, 30, 10, 30);
chart.legend = new am4charts.Legend();
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.rotation = 90;
categoryAxis.renderer.labels.template.fontSize = 13;
categoryAxis.renderer.showAllValueLabels = true;
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.width = 0.5;
console.log(categoryAxis.renderer.width);
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 100;
valueAxis.strictMinMax = true;
valueAxis.calculateTotals = true;
valueAxis.renderer.minWidth = 50;
var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.columns.template.width = am4core.percent(100);
series1.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
series1.name = "Low Risk";
series1.dataFields.categoryX = "category";
series1.dataFields.valueY = "Low";
series1.dataFields.valueYShow = "totalPercent";
series1.dataItems.template.locations.categoryX = 0.5;
series1.stacked = true;
series1.tooltip.pointerOrientation = "vertical";
var bullet1 = series1.bullets.push(new am4charts.LabelBullet());
bullet1.interactionsEnabled = false;
bullet1.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
bullet1.label.fill = am4core.color("#000000");
bullet1.locationY = 0.5;
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.columns.template.width = am4core.percent(100);
series2.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
series2.name = "Medium Risk";
series2.dataFields.categoryX = "category";
series2.dataFields.valueY = "Medium";
series2.dataFields.valueYShow = "totalPercent";
series2.dataItems.template.locations.categoryX = 0.5;
series2.stacked = true;
series2.tooltip.pointerOrientation = "vertical";
var bullet2 = series2.bullets.push(new am4charts.LabelBullet());
bullet2.interactionsEnabled = false;
bullet2.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
bullet2.locationY = 0.5;
bullet2.label.fill = am4core.color("#000000");
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.columns.template.width = am4core.percent(100);
series3.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
series3.name = "High Risk";
series3.dataFields.categoryX = "category";
series3.dataFields.valueY = "High";
series3.dataFields.valueYShow = "totalPercent";
series3.dataItems.template.locations.categoryX = 0.5;
series3.stacked = true;
series3.tooltip.pointerOrientation = "vertical";
var bullet3 = series3.bullets.push(new am4charts.LabelBullet());
bullet3.interactionsEnabled = false;
bullet3.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
bullet3.locationY = 0.5;
bullet3.label.fill = am4core.color("#000000");
var series4 = chart.series.push(new am4charts.ColumnSeries());
series4.columns.template.width = am4core.percent(100);
series4.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
series4.name = "Significant Risk";
series4.dataFields.categoryX = "category";
series4.dataFields.valueY = "Significant";
series4.dataFields.valueYShow = "totalPercent";
series4.dataItems.template.locations.categoryX = 0.5;
series4.stacked = true;
series4.tooltip.pointerOrientation = "vertical";
var bullet4 = series4.bullets.push(new am4charts.LabelBullet());
bullet4.interactionsEnabled = false;
bullet4.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
bullet4.locationY = 0.5;
bullet4.label.fill = am4core.color("#000000");
var series5 = chart.series.push(new am4charts.ColumnSeries());
series5.columns.template.width = am4core.percent(100);
series5.columns.template.tooltipText =
"{name}: {valueY.totalPercent.formatNumber('#.0')}% ({valueY})";
series5.name = "Critical Risk";
series5.dataFields.categoryX = "category";
series5.dataFields.valueY = "Critical";
series5.dataFields.valueYShow = "totalPercent";
series5.dataItems.template.locations.categoryX = 0.5;
series5.stacked = true;
series5.tooltip.pointerOrientation = "vertical";
var bullet5 = series5.bullets.push(new am4charts.LabelBullet());
bullet5.interactionsEnabled = false;
bullet5.label.text = "{valueY.totalPercent.formatNumber('#.0')}%";
bullet5.locationY = 0.5;
bullet5.label.fill = am4core.color("#000000");
chart.scrollbarX = new am4core.Scrollbar();
А вот пример серии:
chart.data =
[{
category: 'Germany',
id: 1,
Low: 4,
Medium: 5,
High: 0,
Significant: 10,
Critical: 8,
point: 0.4
},
{ category: 'Italy',
id: 2,
Low: 2,
Medium: 10,
High: 0,
Significant: 4,
Critical: 2,
point: 0.8
}]
где точка - это значение от 0,0 до 1,0.
Есть ли какая-нибудь хорошая душа, которая может мне помочь?