我有一个 AmCharts 实心仪表图表示例,我想使用类别和大小文本框中的值来呈现它。例如,文本区域将包含此 JSON 数据,
[
{
"Country":"Malaysia",
"Size":260,
"State":"Selangor",
"Population":450
},
{
"Country":"England",
"Size":140,
"State":"Liverpool",
"Population":100
},
{
"Country":"China",
"Size":250,
"State":"Beijing",
"Population":200
},
{
"Country":"South Korea",
"Size":360,
"State":"Seoul",
"Population":300
}
]
然后我将 Category 设置为 Country ,因此它会加载带有 4 个标签的 4 个轴。
然后我将 Size 设置为 Population ,因此它加载 endValue(startValue 从 0 开始对吗?)就是那个。百分比来自 maxValue * 1.2。
我的主要问题是,如何使用带有自定义数据配置的 AmCharts 呈现仪表图? dataProvider 在这里似乎不像在串行图表中那样工作。
Codepen 链接:https://codepen.io/ariff20/pen/WaKJRV
最佳答案
进一步阐述我的评论 - 由于仪表图中不存在 dataProvider
,您可以重新映射您的数据并在您的配置中创建适当的属性/数组,而不是尝试在您的配置中手动设置它们代码笔。例如,您的乐队可以像这样生成:
var colors = ["#84b761", "#fdd400", "#cc4748", "#67b7dc"]; //assuming 4 bands/colors - adjust as needed
var bands = mappedData.reduce(function(acc, d, idx) {
acc.push({
color: "#eee",
startValue: 0,
endValue: d.target,
radius: 100 - 20 * idx + "%",
innerRadius: 85 - 20 * idx + "%"
});
acc.push({
color: colors[idx],
startValue: 0,
endValue: d.value,
radius: 100 - 20 * idx + "%",
innerRadius: 85 - 20 * idx + "%",
balloonText: parseFloat(d.value / d.target * 100).toFixed(2)
});
return acc;
}, []);
标签可以用类似的方式生成:
var labels = mappedData.map(function(d, idx) {
return {
text: d.name,
x: "49%",
y: 6 + 9 * idx + "%",
size: 15,
bold: true,
color: colors[idx],
align: "right"
};
});
生成后,只需填写您的设置模板中的空白并将其传递到您的 makeChart 调用中,首先清除所有以前的实例:
var chart; //global ref to clear the chart
function changeData() {
// ... omitted
var setting = {
type: "gauge",
theme: "light",
axes: [
{
axisAlpha: 1,
tickAlpha: 1,
labelsEnabled: true,
startValue: 0,
endValue: Math.max.apply(
Math,
mappedData.map(function(o) {
return o.target;
})
),
startAngle: 0,
endAngle: 270,
bands: bands
}
],
allLabels: labels,
export: {
enabled: true
}
};
if (chart) {
chart.clear();
chart = null;
}
chart = AmCharts.makeChart("chartdiv", setting);
}
关于javascript - 如何使用具有自定义数据配置的 amcharts 创建实心仪表图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52942861/