Как я могу повернуть Am график в v4? - PullRequest
Новая
       7

Как я могу повернуть Am график в v4?

0 голосов
/ 29 ноября 2018

Как повернуть график Am в версии v4?

Я хочу повернуть ось графика am, как данные осей x, по осям y1 и y1 к вершине диаграммы, например:

https://c3js.org/samples/axes_rotated.html

1 Ответ

0 голосов
/ 30 ноября 2018

Поворот диаграмм v4 - это просто присвоение оси категории / значения требуемому массиву xAxes / yAxes и установка для свойства oppsite и inversed значения true в объектах renderer осей в зависимости от оси.,Например: 

// place category axis on the y axis 
// use inversed to reverse the order so 
// the first category is on top
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
// ...
categoryAxis.renderer.inversed = true;

// place value axis on the x axis and use the opposite property to move it up top
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
// ...
valueAxis.renderer.opposite = true;

Демо: 

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

// Add data
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
}];

// place category axis on the y axis 
// use inversed to reverse the order so 
// the first category is on top
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.inversed = true;

// place value axis on the x axis and use the opposite property to move it up top
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "visits";
series.dataFields.categoryY = "country";
series.tooltipText = "[{categoryX}: bold]{valueY}[/]";
#chartdiv {
  width: 95%;
  height: 300px;
}
<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"></div>
...