amcharts valueaxis增量方式缩放

Question

我的值范围从 1 到 40 000，我试图在 amcharts 系列图表上绘制。由于图表是根据值范围自动缩放的，因此小于 500 的值（例如：10、50、100...）在 x 轴本身上显示为线。在这种情况下，自动缩放为 0-1000-2000-3000...

如何以增量方式实现缩放，即 0-10-100-1000-10000 ...以便包括低价值蜡烛在内的所有蜡烛也能获得显着的可见性。

或建议任何更好的方法来使所有图表蜡烛在图表中可见。

<style>
#chartdiv {
width: 100%;
height: 500px;
}

</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"> 
</script>
<script src="https://www.amcharts.com/lib/4/charts.js"> 
</script>
<script> 
src= 
"https://www.amcharts.com/lib/4/themes/animated.js" >
</script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", 
am4charts.XYChart3D);

// Adding sample data
chart.data = [{
  "country": "USA",
  "visits": 39000
}, {
  "country": "China",
  "visits": 100
}, {
  "country": "Japan",
  "visits": 35000
}, {
  "country": "Germany",
  "visits": 50
}, {
  "country": "UK",
  "visits": 200
}, {
  "country": "France",
  "visits": 20
}, {
  "country": "India",
  "visits": 25
}, {
  "country": "Spain",
  "visits": 711
} ];

// Create axes
let categoryAxis = chart.xAxes.push(new 
am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.labels.template.rotation = 270;
categoryAxis.renderer.labels.template.hideOversized = 
false;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.labels.template.horizontalCenter = 
"right";
categoryAxis.renderer.labels.template.verticalCenter = 
"middle";
categoryAxis.tooltip.label.rotation = 270;
categoryAxis.tooltip.label.horizontalCenter = "right";
categoryAxis.tooltip.label.verticalCenter = "middle";

let valueAxis = chart.yAxes.push(new 
am4charts.ValueAxis());
valueAxis.title.text = "Countries";
valueAxis.title.fontWeight = "bold";

// Create series
var series = chart.series.push(new 
am4charts.ColumnSeries3D());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;
columnTemplate.stroke = am4core.color("#FFFFFF");

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

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

chart.cursor = new am4charts.XYCursor();
chart.cursor.lineX.strokeOpacity = 0;
chart.cursor.lineY.strokeOpacity = 0;

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

Answer 1

您可以通过设置来实现：

valueAxis.logarithmic = true;

amcharts valueaxis增量方式缩放

amcharts valueaxis incremental manner scaling

amcharts

amcharts4