Помогите с форматированием данных для Highcharts

218
02 декабря 2017, 10:49

Здравствуйте. Есть таблица 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);
Answer 1

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>

READ ALSO
phpcs не видит модификаторов доступа

phpcs не видит модификаторов доступа

Сегодня phpcs вдруг начал чудитьПодсветил все объявления функций и переменных и везде написал "Visibility must be declarated on

200
Ошибки после переноса базы данных

Ошибки после переноса базы данных

Перенос произошел с: http://prihozhaneru/ на http://sudba

225
Постоянное соединение с базой MySQL

Постоянное соединение с базой MySQL

Из-за повторных соединений с базой возникает существенная нагрузка на сервер MySQL, на эти операции приходится 64% от общей нагрузки, неизбежно...

236
Как закодировать текст в картинку? [требует правки]

Как закодировать текст в картинку? [требует правки]

Что нужно для того, что бы закодировать текст в картинку ? То есть есть картинка раскодировать ее как то и записать туда какой то текст "Hello"...

214