amcharts valueaxis инкрементальное масштабирование

У меня есть диапазон значений от 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>

person user3606746    schedule 12.06.2019    source источник


Ответы (1)


Вы можете добиться этого, установив:

valueAxis.logarithmic = true;
person zeroin    schedule 14.06.2019