Javascript amchart适配器中的目标参数是什么
我正在尝试使用amchart4创建差异图表。我正在使用演示中的示例 在适配器上的以下每个用法中,目标对象的实际用途是什么 是ValueAxis还是CategoryAxis还是其他什么Javascript amchart适配器中的目标参数是什么,javascript,amcharts,amcharts4,Javascript,Amcharts,Amcharts4,我正在尝试使用amchart4创建差异图表。我正在使用演示中的示例 在适配器上的以下每个用法中,目标对象的实际用途是什么 是ValueAxis还是CategoryAxis还是其他什么 // Create axes var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "year"; categ
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "year";
// Add series for showing variance arrows
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueY = "valueNext";
series2.dataFields.openValueY = "value";
series2.dataFields.categoryX = "year";
series2.columns.template.width = 1;
series2.fill = am4core.color("#555");
series2.stroke = am4core.color("#555");
// Add a triangle for arrow tip
var arrow = series2.bullets.push(new am4core.Triangle);
arrow.width = 10;
arrow.height = 10;
arrow.horizontalCenter = "middle";
arrow.verticalCenter = "top";
arrow.dy = -1;
// Set up a rotation adapter which would rotate the triangle if its a negative change
arrow.adapter.add("rotation", function(rotation, target) {
return getVariancePercent(target.dataItem) < 0 ? 180 : rotation;
});
// Set up a rotation adapter which adjusts Y position
arrow.adapter.add("dy", function(dy, target) {
return getVariancePercent(target.dataItem) < 0 ? 1 : dy;
});
// Add a label
var label = series2.bullets.push(new am4core.Label);
label.padding(10, 10, 10, 10);
label.text = "";
label.fill = am4core.color("#0c0");
label.strokeWidth = 0;
label.horizontalCenter = "middle";
label.verticalCenter = "bottom";
label.fontWeight = "bolder";
// Adapter for label text which calculates change in percent
label.adapter.add("textOutput", function(text, target) {
var percent = getVariancePercent(target.dataItem);
return percent ? percent + "%" : text;
});
// Adapter which shifts the label if it's below the variance column
label.adapter.add("verticalCenter", function(center, target) {
return getVariancePercent(target.dataItem) < 0 ? "top" : center;
});
// Adapter which changes color of label to red
label.adapter.add("fill", function(fill, target) {
return getVariancePercent(target.dataItem) < 0 ? am4core.color("#c00") : fill;
});
function getVariancePercent(dataItem) {
if (dataItem) {
var value = dataItem.valueY;
var openValue = dataItem.openValueY;
var change = value - openValue;
return Math.round(change / openValue * 100);
}
return 0;
}
//创建轴
var categoryAxis=chart.xAxes.push(新的am4charts.categoryAxis());
categoryAxis.dataFields.category=“年”;
categoryAxis.renderer.grid.template.location=0;
categoryAxis.renderer.minGridDistance=30;
var valueAxis=chart.yAxes.push(新的am4charts.valueAxis());
valueAxis.min=0;
//创建系列
var series=chart.series.push(新的am4charts.ColumnSeries());
series.dataFields.valueY=“value”;
series.dataFields.categoryX=“年”;
//添加显示差异箭头的系列
var series2=chart.series.push(新的am4charts.ColumnSeries());
series2.dataFields.valueY=“valueNext”;
series2.dataFields.openValueY=“value”;
series2.dataFields.categoryX=“年”;
series2.columns.template.width=1;
series2.fill=am4core.color(“#555”);
series2.stroke=am4core.color(“#555”);
//为箭头尖添加一个三角形
var arrow=序列2.项目符号.push(新am4core.三角形);
箭头宽度=10;
arrow.height=10;
arrow.horizontalCenter=“中间”;
arrow.verticalCenter=“顶部”;
arrow.dy=-1;
//设置一个旋转适配器,如果三角形为负变化,该适配器将旋转三角形
arrow.adapter.add(“旋转”),函数(旋转,目标){
返回getVariancePercent(target.dataItem)<0?180:旋转;
});
//设置可调整Y位置的旋转适配器
arrow.adapter.add(“dy”,函数(dy,目标){
返回getVariancePercent(target.dataItem)<0-1:dy;
});
//添加标签
var label=series2.bullets.push(新的am4core.label);
标签。填充(10,10,10,10);
label.text=“”;
label.fill=am4core.color(#0c0”);
label.strokeWidth=0;
label.horizontalCenter=“middle”;
label.verticalCenter=“底部”;
label.fontwweight=“粗体”;
//用于计算百分比变化的标签文本的适配器
label.adapter.add(“textOutput”,函数(文本,目标){
var百分比=getVariancePercent(target.dataItem);
返回百分比?百分比+“%”:文本;
});
//如果标签位于“差异”列下方,则移动标签的适配器
label.adapter.add(“垂直中心”,函数(中心,目标){
返回getVariancePercent(target.dataItem)<0?“top”:中间;
});
//将标签颜色更改为红色的适配器
label.adapter.add(“fill”),函数(fill,target){
返回getVariancePercent(target.dataItem)<0?am4core.color(“#c00”):填充;
});
函数getVariancePercent(数据项){
如果(数据项){
var值=dataItem.valueY;
var openValue=dataItem.openValueY;
var变化=价值-开放价值;
返回数学舍入(更改/打开值*100);
}
返回0;
}
在对象上添加适配器时,第一个参数是要修改的值,第二个参数,target
是适配器添加到的对象的实例(如果添加console.log(target.className)
可以看到对象类实例的名称)。因此,在下面的片段中:
// Set up a rotation adapter which would rotate the triangle if its a negative change
arrow.adapter.add("rotation", function(rotation, target) {
return getVariancePercent(target.dataItem) < 0 ? 180 : rotation;
});
// Set up a rotation adapter which adjusts Y position
arrow.adapter.add("dy", function(dy, target) {
return getVariancePercent(target.dataItem) < 0 ? 1 : dy;
});
每个适配器中的目标
都是与序列中的数据点关联的标签(项目符号)实例
// Adapter for label text which calculates change in percent
label.adapter.add("textOutput", function(text, target) {
var percent = getVariancePercent(target.dataItem);
return percent ? percent + "%" : text;
});
// Adapter which shifts the label if it's below the variance column
label.adapter.add("verticalCenter", function(center, target) {
return getVariancePercent(target.dataItem) < 0 ? "top" : center;
});
// Adapter which changes color of label to red
label.adapter.add("fill", function(fill, target) {
return getVariancePercent(target.dataItem) < 0 ? am4core.color("#c00") : fill;
});