amcharts - 可能的自定义轴比例?
问题描述
是否可以为数值结果设置我自己的比例?
我需要将这些值设置为 10、20、50、100、200、500、1000、2000、5000、10000
解决方案
AmCharts v4 不提供直接影响minGridDistance
轴设置之外的比例的方法。解决方法是禁用轴自己生成的标签并使用轴范围创建自己的标签。您还需要在轴上设置自己的最小值/最大值。
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.min = <your min value>;
range = valueAxis.axisRanges.create();
range.value = <axis value>;
range.endValue = range.value;
range.label.text = range.value;
// ... repeat for each axis increment
valueAxis.max = <your max value>;
这是一个基本的演示:
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"date": new Date(2018, 0, 1),
"value": 450,
"value2": 362,
"value3": 699
}, {
"date": new Date(2018, 0, 2),
"value": 269,
"value2": 450,
"value3": 841
}, {
"date": new Date(2018, 0, 3),
"value": 700,
"value2": 358,
"value3": 699
}, {
"date": new Date(2018, 0, 4),
"value": 490,
"value2": 367,
"value3": 500
}, {
"date": new Date(2018, 0, 5),
"value": 500,
"value2": 485,
"value3": 369
}, {
"date": new Date(2018, 0, 6),
"value": 550,
"value2": 354,
"value3": 250
}, {
"date": new Date(2018, 0, 7),
"value": 420,
"value2": 350,
"value3": 600
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
categoryAxis.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.min = 0;
var rangeValue = 50;
for (var i = 0; i < 8; ++i) {
range = valueAxis.axisRanges.create();
range.value = (rangeValue += ((i + 2) * 25));
range.endValue = range.value;
range.label.text = range.value;
}
valueAxis.max = rangeValue;
// Create series
function createSeries(field, name) {
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = field;
series.dataFields.dateX = "date";
series.name = name;
series.tooltipText = "{dateX}: [b]{valueY}[/]";
series.strokeWidth = 2;
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
}
createSeries("value", "Series #1");
createSeries("value2", "Series #2");
createSeries("value3", "Series #3");
chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width:100%; height: 500px;"></div>
推荐阅读
- java - 没有外键的 JPA OneToOne 关联不起作用
- java - RxJava 订阅相互依赖的 flowables 组合
- xcode - 如何在场景套件中显示金属质感
- solr - 如何使用 SOLR 中的类型字符串获取?
- django - Django Sendgrid Heroku 设置
- java - 更改 TimePickerDialog 的输入模式
- javascript - Discord bot 也在读取旧前缀
- java - 如何在休眠中将结果存储到地图中?
- autodesk-forge - 从 Revit 文件中检索元数据
- python - 我的两个函数不能正常工作,IDE 不显示错误或崩溃