JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/14.2.3/js/dx.chartjs.js"></script>
<div class="objects_comporison chart_container"></div>
<div class="cyclic_time chart_container"></div>
<div class="wind_rose chart_container"></div>
<div class="data_comporison chart_container"></div>
CSS
.chart_container {
width: 500px;
height: 500px;
}
JavaScript
$(".objects_comporison").dxPolarChart({
title: "Оценка двух пород кошек\n по десятибалльной шкале",
useSpiderWeb: true,
dataSource: [{
arg: "Вес",
cat1: 8,
cat2: 5
}, {
arg: "Длина шерсти",
cat1: 7,
cat2: 3
}, {
arg: "Здоровье",
cat1: 7,
cat2: 6
}, {
arg: "Добродушность",
cat1: 7,
cat2: 8
}, {
arg: "Игривость",
cat1: 6,
cat2: 8
}, {
arg: "Интеллект",
cat1: 8,
cat2: 5
}],
commonSeriesSettings: {
type: "area",
border: {
visible: true
}
},
series: [{
name: "Мейн-кун",
valueField: "cat1"
}, {
name: "Британская короткошерстная",
valueField: "cat2"
}],
valueAxis: {
categories: [1,2,3,4,5,6,7,8,9,10]
},
legend: {
horizontalAlignment: "center",
itemTextPosition: "right"
},
tooltip: {
enabled: true
}
});
$(".cyclic_time").dxPolarChart({
title: "Продажи за первый\n и второй кварталы",
dataSource: [{
arg: 1,
val: 12000000
},{
arg: 2,
val: 14000000
},{
arg: 3,
val: 13000000
},{
arg: 4,
val: 18000000
},{
arg: 5,
val: 21000000
},{
arg: 6,
val: 16000000
}],
series: {
type: "line"
},
argumentAxis: {
period: 3,
tickInterval: 1,
label: {
customizeText: function(label) {
return label.valueText + " месяц";
}
}
},
valueAxis: {
label: {
format: "millions"
}
},
legend: {
visible: false
}
});
$(".wind_rose").dxPolarChart({
title: "Роза ветров в Москве\n за октябрь 2014",
dataSource: [{
arg: "С",
day: 8,
night: 6
},{
arg: "СВ",
day:...