javascript - 在 AMCharts4 上增量调整列

Question

使用这个例子: https://codepen.io/team/amcharts/pen/OQePOB

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this makes initial fade in effect

chart.data = [
  {
    country: "USA",
    visits: 3025
  },
  {
    country: "China",
    visits: 1882
  },
  {
    country: "Japan",
    visits: 1809
  },
  {
    country: "Germany",
    visits: 1322
  },
  {
    country: "UK",
    visits: 1122
  },
  {
    country: "France",
    visits: 1114
  },
  {
    country: "India",
    visits: 984
  },
  {
    country: "Spain",
    visits: 711
  },
  {
    country: "Netherlands",
    visits: 665
  },
  {
    country: "Russia",
    visits: 580
  },
  {
    country: "South Korea",
    visits: 443
  },
  {
    country: "Canada",
    visits: 441
  }
];

chart.padding(40, 40, 0, 0);
chart.maskBullets = false; 

var text = chart.plotContainer.createChild(am4core.Label);
text.text = "Drag column bullet to change its value";
text.y = 92;
text.x = am4core.percent(100);
text.horizontalCenter = "right";
text.zIndex = 100;
text.fillOpacity = 0.7;

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.renderer.minGridDistance = 50;


var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.strictMinMax = true;
valueAxis.min = 0;
valueAxis.max = 3400;
valueAxis.renderer.minWidth = 60;

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = "country";
series.dataFields.valueY = "visits";
series.tooltip.pointerOrientation = "vertical";
series.tooltip.dy = -8;
series.sequencedInterpolation = true;
series.defaultState.interpolationDuration = 1500;
series.columns.template.strokeOpacity = 0;

var labelBullet = new am4charts.LabelBullet();
series.bullets.push(labelBullet);
labelBullet.label.text = "{valueY.value.formatNumber('#.')}";
labelBullet.strokeOpacity = 0;
labelBullet.stroke = am4core.color("#dadada");
labelBullet.dy = -20;


var bullet = series.bullets.create();
bullet.stroke = am4core.color("#ffffff");
bullet.strokeWidth = 3;
bullet.opacity = 1;
bullet.defaultState.properties.opacity = 1;
bullet.cursorOverStyle = am4core.MouseCursorStyle.verticalResize;
bullet.draggable = true;

var hoverState = bullet.states.create("hover");
hoverState.properties.opacity = 1; // visible when hovered

var circle = bullet.createChild(am4core.Circle);
circle.radius = 8;

bullet.events.on("drag", event => {
  handleDrag(event);
});

bullet.events.on("dragstop", event => {
  handleDrag(event);
  var dataItem = event.target.dataItem;
  dataItem.column.isHover = false;
  event.target.isHover = false;
});

function handleDrag(event) {
  var dataItem = event.target.dataItem;
  var value = valueAxis.yToValue(event.target.pixelY);
  dataItem.valueY = value;
  dataItem.column.isHover = true;
  dataItem.column.hideTooltip(0);
  event.target.isHover = true;
}

var columnTemplate = series.columns.template;
columnTemplate.column.cornerRadiusTopLeft = 8;
columnTemplate.column.cornerRadiusTopRight = 8;
columnTemplate.column.fillOpacity = 0.8;
columnTemplate.tooltipText = "drag me";
columnTemplate.tooltipY = 0; // otherwise will point to middle of the column

var columnHoverState = columnTemplate.column.states.create("hover");
columnHoverState.properties.fillOpacity = 1;
columnHoverState.properties.cornerRadiusTopLeft = 35;
columnHoverState.properties.cornerRadiusTopRight = 35;

columnTemplate.events.on("over", event => {
  var dataItem = event.target.dataItem;
  var itemBullet = dataItem.bullets.getKey(bullet.uid);
  itemBullet.isHover = true;
});

columnTemplate.events.on("out", event => {
  var dataItem = event.target.dataItem;
  var itemBullet = dataItem.bullets.getKey(bullet.uid);
  itemBullet.isHover = false;
});

columnTemplate.events.on("down", event => {
  var dataItem = event.target.dataItem;
  var itemBullet = dataItem.bullets.getKey(bullet.uid);
  itemBullet.dragStart(event.pointer);
});

columnTemplate.events.on("positionchanged", event => {
  var dataItem = event.target.dataItem;
  var itemBullet = dataItem.bullets.getKey(bullet.uid);

  var column = dataItem.column;
  itemBullet.minX = column.pixelX + column.pixelWidth / 2;
  itemBullet.maxX = itemBullet.minX;
  itemBullet.minY = 0;
  itemBullet.maxY = chart.seriesContainer.pixelHeight;
});

columnTemplate.adapter.add("fill", (fill, target) => {
  return chart.colors.getIndex(target.dataItem.index).saturate(0.3);
});

bullet.adapter.add("fill", (fill, target) => {
  return chart.colors.getIndex(target.dataItem.index).saturate(0.3);
});

有没有办法在滑动列时使其仅以增量向上或向下移动。当处理更大的数字时，我想更改它所在的增量，但我不想最终得到 1,230,322，我宁愿 1,230,000。

例如100 > 200 > 300 > 400 < 300 > 400

这样只能以 100 为增量

Answer 1

对此没有直接设置，但您可以通过除法、舍入然后将值乘以增量来操作handleDrag方法中的值，例如

function handleDrag(event) {
  var dataItem = event.target.dataItem;
  // convert coordinate to value
  var value = valueAxis.yToValue(event.target.pixelY);
  // set new value - lock to increments of 100
  dataItem.valueY = Math.round(value / 100) * 100;
  // ...
}

这将根据需要锁定增量。

Updated demo