Здравствуйте. Есть таблица MySQL примерно такого вида:
Пол Позиция Возраст Возрастная группа
Женщина За 25 18-25
Мужчина За 27 25-40
Ну и т.д. Так же есть PHP файл, который с помощью mysqli запроса
SELECT `Позиция`,`Возрастная группа`, count(*)
FROM `Люди`
WHERE `Позиция` IS NOT NULL
GROUP BY `Позиция`, `Возрастная группа`
вытягивает данные и создаёт из них массив, который переходит в json_encode. К этому файлу как к источнику данных обращается Highcharts с такими настройками
<script type="text/javascript">$(document).ready(function() {
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Какое-то название',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Какое-то название'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0].data = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
Вопрос. Как мне изменить настройку series или как построить запрос так, чтобы форматирование данных подошло и график построился? Хочу Highcharts Stacked Column Chart.
UPD: JSON выглядит примерно вот так:
array (
0 =>
array (
0 => 'Сторонник',
1 => '18-25',
2 => 15,
),
1 =>
array (
0 => 'Сторонник',
1 => '26-40',
2 => 436,
),
2 =>
array (
0 => 'Сторонник',
1 => '41-55',
2 => 632,
),
3 =>
array (
0 => 'Сторонник',
1 => '56+',
2 => 2149,
),
4 =>
array (
0 => 'Противник',
1 => '18-25',
2 => 30,
),
5 =>
array (
0 => 'Противник',
1 => '26-40',
2 => 653,
),
6 =>
array (
0 => 'Противник',
1 => '41-55',
2 => 876,
),
7 =>
array (
0 => 'Противник',
1 => '56+',
2 => 3014,
),
8 =>
array (
0 => 'Потенциальный сторонник',
1 => '18-25',
2 => 9,
),
9 =>
array (
0 => 'Потенциальный сторонник',
1 => '26-40',
2 => 170,
),
10 =>
array (
0 => 'Потенциальный сторонник',
1 => '41-55',
2 => 280,
),
11 =>
array (
0 => 'Потенциальный сторонник',
1 => '56+',
2 => 992,
),
12 =>
array (
0 => 'Не определился',
1 => '18-25',
2 => 44,
),
13 =>
array (
0 => 'Не определился',
1 => '26-40',
2 => 862,
),
14 =>
array (
0 => 'Не определился',
1 => '41-55',
2 => 1266,
),
15 =>
array (
0 => 'Не определился',
1 => '56+',
2 => 3656,
),
)
То, что достаёт данные из MySQL
$result = mysqli_query ($con, $sql);
$rows = array();
while($r = mysqli_fetch_array($result)) {
$row[0] = $r[0];
$row[1] = $r[1];
array_push($rows,$row);
}
print json_encode($rows, JSON_NUMERIC_CHECK);
mysqli_close($con);
3 минуты гугления выкинуло меня в документацию, в документации нашел примерный график, согласно которому забадяжил данный кодик.
//ваш массив
$arr = [
0 => [
0 => 'Сторонник',
1 => '18-25',
2 => 15,
],
1 => [
0 => 'Сторонник',
1 => '26-40',
2 => 436,
],
2 => [
0 => 'Сторонник',
1 => '41-55',
2 => 632,
],
3 => [
0 => 'Сторонник',
1 => '56+',
2 => 2149,
],
4 => [
0 => 'Противник',
1 => '18-25',
2 => 30,
],
5 => [
0 => 'Противник',
1 => '26-40',
2 => 653,
],
6 => [
0 => 'Противник',
1 => '41-55',
2 => 876,
],
7 => [
0 => 'Противник',
1 => '56+',
2 => 3014,
],
8 => [
0 => 'Потенциальный сторонник',
1 => '18-25',
2 => 9,
],
9 => [
0 => 'Потенциальный сторонник',
1 => '26-40',
2 => 170,
],
10 => [
0 => 'Потенциальный сторонник',
1 => '41-55',
2 => 280,
],
11 => [
0 => 'Потенциальный сторонник',
1 => '56+',
2 => 992,
],
12 => [
0 => 'Не определился',
1 => '18-25',
2 => 44,
],
13 => [
0 => 'Не определился',
1 => '26-40',
2 => 862,
],
14 => [
0 => 'Не определился',
1 => '41-55',
2 => 1266,
],
15 => [
0 => 'Не определился',
1 => '56+',
2 => 3656,
],
];
//названия выводятся справа
$right = [];
//числовые данные графика
$data = [];
foreach ($arr as $index => $value) {
if (!in_array($value[1], $right)) $right[] = $value[1];
if (!isset($data[$value[0]])) {
$data[$value[0]] = ['name' => $value[0]];
$data[$value[0]]['data'][] = $value[2];
} else {
$data[$value[0]]['data'][] = $value[2];
}
}
//заполняем массив, из которого будет создан json
$new_arr['names'] = $right;
$new_arr['data'] = $data;
//убираю ассоц. ключи из массива
foreach ($new_arr['data'] as $index => $value) {
$without_assoc[] = $value;
}
$new_arr['data'] = $without_assoc;
//выводим json
echo json_encode($new_arr);
Далее копирую json в html.
В пхп-массиве names
и data
я назвал как захотел, чтобы позже обратиться к ним в яваскрипте
options.xAxis.categories = json.names;
options.series = json.data;
А вот внутри data - name и data изменять нельзя, так как к ним обращается ядро хайхчарта.
plotOptions
вычеркнул, так как эта секция дает ошибку в строке
color: (Highcharts.theme Highcharts.theme.dataLabelsColor)
<!DOCTYPE html>
<html>
<head>
<title>titile</title>
<meta charset="utf-8">
<style>
</style>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Название графика',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Сбоку название'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
// $.getJSON("data.php", function(json) {
var json = {
"names": ["18-25", "26-40", "41-55", "56+"],
"data": [{
"name": "\u0421\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043a",
"data": [15, 436, 632, 2149]
}, {
"name": "\u041f\u0440\u043e\u0442\u0438\u0432\u043d\u0438\u043a",
"data": [30, 653, 876, 3014]
}, {
"name": "\u041f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u043a",
"data": [9, 170, 280, 992]
}, {
"name": "\u041d\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0441\u044f",
"data": [44, 862, 1266, 3656]
}]
};
options.xAxis.categories = json.names;
options.series = json.data;
chart = new Highcharts.Chart(options);
// });
});
</script>
</head>
<body>
<div id="container"></div>
<div class="container"></div>
</body>
</html>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Сегодня phpcs вдруг начал чудитьПодсветил все объявления функций и переменных и везде написал "Visibility must be declarated on
Из-за повторных соединений с базой возникает существенная нагрузка на сервер MySQL, на эти операции приходится 64% от общей нагрузки, неизбежно...
Что нужно для того, что бы закодировать текст в картинку ? То есть есть картинка раскодировать ее как то и записать туда какой то текст "Hello"...