Поворот графика в amCharts 4

105
30 сентября 2019, 06:40

После перехода на новую версию, столкнулся с проблемой поворота графика на 90 градусов. В версии amCharts3 можно было сделать одной строкой "rotation": true. Ниже приведу код.

Внимание, вопрос: Как повернуть данный график на 90 градусов? Какие строки надо дописать?

Единственное вычитал, не смог применить categoryAxis. класс Sprites и его атрибут rotation (0-360) Заранее благодарю!

// Themes begin 
am4core.useTheme(am4themes_dark); 
am4core.useTheme(am4themes_animated); 
// Themes end 
 
var chart = am4core.create("chartdiv", am4charts.XYChart); 
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in 
 
chart.data = [ 
  { 
    country: "USA", 
    visits: 23725 
  }, 
  { 
    country: "Canada", 
    visits: 441 
  } 
]; 
 
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); 
categoryAxis.renderer.grid.template.location = 0; 
categoryAxis.dataFields.category = "country"; 
 
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); 
valueAxis.min = 0; 
valueAxis.max = 24000; 
valueAxis.strictMinMax = true; 
valueAxis.renderer.minGridDistance = 30; 
// axis break 
var axisBreak = valueAxis.axisBreaks.create(); 
axisBreak.startValue = 2100; 
axisBreak.endValue = 22900; 
axisBreak.breakSize = 0.005; 
 
// make break expand on hover 
var hoverState = axisBreak.states.create("hover"); 
hoverState.properties.breakSize = 1; 
hoverState.properties.opacity = 0.1; 
hoverState.transitionDuration = 1500; 
 
axisBreak.defaultState.transitionDuration = 1000; 
 
var series = chart.series.push(new am4charts.ColumnSeries()); 
series.dataFields.categoryX = "country"; 
series.dataFields.valueY = "visits"; 
series.columns.template.tooltipText = "{valueY.value}"; 
series.columns.template.tooltipY = 0; 
series.columns.template.strokeOpacity = 0; 
 
// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set 
series.columns.template.adapter.add("fill", function(fill, target) { 
  return chart.colors.getIndex(target.dataItem.index); 
});
body { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
} 
 
body { background-color: #30303d; color: #fff; } 
#chartdiv { 
  width: 100%; 
  height: 500px; 
}
<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/dark.js"></script> 
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> 
<div id="chartdiv"></div>

Answer 1

Всё оказалось довольно интересно: Надо заменить fабсолютно все упоминания оси X на ось Y и наоборот. (внимание на символы X Y)

Было:

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
series.dataFields.categoryX = "country";

Стало:

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
series.dataFields.categoryY = "country";
READ ALSO
Не обновляется компонент ObjectManager при изменении state

Не обновляется компонент ObjectManager при изменении state

Когда жму на кнопку обновляется состояние компонентаИ обновленное состояние передается в компонент ObjectManager, но этот компонент не перерисовывается

100
объясните что такое this в js [дубликат]

объясните что такое this в js [дубликат]

На данный вопрос уже ответили:

105
Как запустить app на localhost с загрузкой js [закрыт]

Как запустить app на localhost с загрузкой js [закрыт]

Запускаю проект командой node appjs , переходу на localhost и вижу следующее:

121
Почему не работает getDisplayMedia в chrome?

Почему не работает getDisplayMedia в chrome?

Хочу вывести экран в тег videoИспользую API:

90