javascript - 来自数据系列的 AMChart v4 Stacked Column Chart 宽度列
问题描述
我需要这个著名插件的帮助。我正在使用图表“堆积柱形图”来创建“Mekko 图表”,因为在 v4 中不是原生的。我做到了,但我不知道如何根据系列实现动态宽度。
这里的代码:
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
}]
其中 point 是介于 0.0 和 1.0 之间的值。
有好心人能帮帮我吗?
解决方案
推荐阅读
- mongodb - MongoDB mongorestore 非分片集合到分片集合
- c# - 试图建立一个保存/加载系统,需要帮助将值从一个类加载到另一个
- regex - 在正则表达式中保持前瞻值
- java - 如何设置在 Java 代码中创建的文件的创建日期?
- c - GCC 警告我指令输出截断
- build - 我使用 Tailwind 制作的 CSS 不适用于使用 gridsome 构建 netlify
- vba - 根据值将数据从一个工作簿复制到另一个工作簿
- node.js - CasperJS 已被重定向,然后以 status=fail (HTTP 302) 退出
- java - 如何将我的应用程序从 android studio 与 amadeus api 连接
- scala - 为什么最多 4 个元素的集合是有序的,而更大的则不是?