Построение графика

@юрьич · Регистрация: 10.09.2012

Студворк — интернет-сервис помощи студентам

Всем привет. Хочу вывести графики. Решил использовать highcharts.js. Подключил пример, работает. Только теперь не могу въехать как мне данные передать.

HTML5
1
2
3
4
5
6
<div class="col-xs-12 col-xl-6">
<div id="chart_1" class="chart"></div>
</div>
<div class="col-xs-12 col-xl-6">
<div id="chart_2" class="chart"></div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// Change Chart type function
function ChangeChartType(chart, series, newType) {
    newType = newType.toLowerCase();
    for (var i = 0; i < series.length; i++) {
        var srs = series[0];
        try {
            srs.chart.addSeries({
                type: newType,
                stack: srs.stack,
                yaxis: srs.yaxis,
                name: srs.name,
                color: srs.color,
                data: srs.options.data
            },
            false);
            series[0].remove();
        } catch (e) {
        }
    }
}
 
// Two charts definition
var chart1, chart2;
 
// Once DOM (document) is finished loading
$(document).ready(function() {
 
    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'line',
        height: 350,
     },
     title: {
        text: 'Изменение размеров шеи,талии и бёдер за 10 недель в %'
     },
     xAxis: {
        categories: [1,2,3,4,5,6,7,8,9,10]
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Талия',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Бёдра',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }, {
        name: 'Шея',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });
 
    // Second chart initialization (pie chart)
    /*
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 350,
        },
        title: {
            text: 'Pie chart diagram for the first developer'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
         series: [{
         type: 'pie',
            name: 'Dev #1',
            data: [
                ['Processing.js', 5],
                ['Impact.js', 10],
                ['Other', 20],
                ['Ease.js', 22],
                ['Box2D.js', 25],
                ['WebGL', 28],
                ['DOM', 30],
                ['CSS', 40],
                ['Canvas', 80],
                ['Javascript', 90]
            ]
         }]
    });
    */
 
    // Switchers (of the Chart1 type) - onclick handler
    $('.switcher').click(function () {
        var newType = $(this).attr('id');
        ChangeChartType(chart1, chart1.series, newType);
    });
});

Пример здесь http://codepen.io/Ureech/pen/VPPBjp?editors=1010
Из php имею переменую, результат запроса

PHP
1
2
3
4
5
6
....
            while ($data = $inDB->fetch_assoc($result)) {
                
                $list[] = join($data,',');
            }
....

PHP
1
print_r($list) = Array ( [0] => 145.00 [1] => 115.00 [2] => 140.00 [3] => 0.00 [4] => 0.00 [5] => 0.00 [6] => 0.00 [7] => 0.00 [8] => 0.00 [9] => 0.00 )

Далее передаю в смарти шаблон, к которому подключен js инициализации

PHP
1
assign('list', implode(',',$list))->

В этом js : var data ='{$list}'; alert(data) показывает
145.00,115.00,140.00,0.00,0.00,0.00,0.00 ,0.00,0.00,0.00
Но при подставлении в ф-цию

JavaScript
1
2
3
4
5
....
     series: [{
        name: 'Dev #1',
     data: [datа]
...

не хочет работать. Подскажите почему?

@Уф · 19.01.2017, 15:19

var data ='{$list}'; у тебя тут строка, а нужен массив,
в подставлении получается массив с одним элементом содержащим всю эту строку чисел. попробуй обратно

JavaScript
1
 data: data.split(',')

@юрьич · 19.01.2017, 15:36 **[ТС]**

Не выходит.Посмотрел, что показывает alert(data.split(',')) тоже самое. И главное в консоле не показывает вместо переменой строку или массив, а просто имя.

@Уф · 19.01.2017, 15:41

если браузер хром в консоли видно что это, массив, объект или строка

@юрьич · 19.01.2017, 15:59 **[ТС]**

Без разницы.Что там, что там.Только имя. Но там, где объявляю переменую в шаблоне var data ='{$list}'; показывает строку.

Добавлено через 3 минуты
Главное такой пример у них в доках http://www.highcharts.com/docs... a-database

@Уф · 19.01.2017, 16:08

после отработки пхп посмотри исходные код страницы, там будет видно что на месте данных, строки или массив, есть ли кавычки и т.д. кстати в консоли ошибок нет?

@j2FunOnly · 19.01.2017, 16:23

Сообщение от юрьич

И главное в консоле не показывает вместо переменой строку или массив

Сообщение от юрьич

показывает alert(data.split(',')) тоже самое

Сообщение от юрьич

В этом js : var data ='{$list}'; alert(data) показывает

alert не совсем в консоль показывает. Для вывода в консоль воспользуйтесь console.log(data) или console.dir(data) и будет видно что там: строка, массив или объект.

@юрьич · 19.01.2017, 16:47 **[ТС]**

Сообщение от j2FunOnly

alert не совсем в консоль показывает. Для вывода в консоль воспользуйтесь console.log(data) или console.dir(data) и будет видно что там: строка, массив или объект.

console.log(dat)
Строка
145.00,115.00,140.00,0.00,0.00,0.00,0.00 ,0.00,0.00,0.00
Если прописываю её в data:145.00,115.00,140.00,0.00,0.00,0.00 ,0.00,0.00,0.00,0.00 всё работает. Подставляю переменую,нет.

Добавлено через 3 минуты
console.log(dat.split(','))
Array [ "145.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00" ]

@j2FunOnly · 19.01.2017, 16:51

Сообщение от юрьич

console.log(dat.split(','))
Array [ "145.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00" ]

Вот так вот точно поломается:
http://www.highcharts.com/errors/14

Сообщение от юрьич

Строка

А должен быть массив, элементы которого типа Number. Мало ли, что там в примере увидели, читайте API http://api.highcharts.com/high... ne%3E.data
И вот вам пример, например:

HTML5
1
2
<div id="container" style="width:100%; height:400px;"></div>
<div id="container2" style="width:100%; height:400px;"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Highcharts.chart({
  chart: {
    renderTo: 'container'
  },
  series: [{
    data: [145.00, 115.00, 140.00, 10.00, 250.00, 130.00]
  }]
});
 
Highcharts.chart({
  chart: {
    renderTo: 'container2'
  },
  series: [{
    data: ['145.00,115.00,140.00,10.00,250.00,130.00']
  }]
});

https://jsfiddle.net/j2FunOnly/akL36v8g/2/

@юрьич · 19.01.2017, 17:02 **[ТС]**

В примере у меня тоже работает:

HTML5
1
2
3
4
5
6
<div class="col-xs-12 col-xl-6">
<div id="chart_1" class="chart"></div>
</div>
<div class="col-xs-12 col-xl-6">
<div id="chart_2" class="chart"></div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
// Change Chart type function
function ChangeChartType(chart, series, newType) {
    newType = newType.toLowerCase();
    for (var i = 0; i < series.length; i++) {
        var srs = series[0];
        try {
            srs.chart.addSeries({
                type: newType,
                stack: srs.stack,
                yaxis: srs.yaxis,
                name: srs.name,
                color: srs.color,
                data: srs.options.data
            },
            false);
            series[0].remove();
        } catch (e) {
        }
    }
}
 
// Two charts definition
var chart1, chart2;
 
// Once DOM (document) is finished loading
$(document).ready(function() {
 
    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'line',
        height: 350,
     },
     title: {
        text: 'Изменение размеров шеи,талии и бёдер за 10 недель в %'
     },
     xAxis: {
        categories: [1,2,3,4,5,6,7,8,9,10]
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Талия',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Бёдра',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }, {
        name: 'Шея',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });
 
    // Second chart initialization (pie chart)
    /*
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 350,
        },
        title: {
            text: 'Pie chart diagram for the first developer'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
         series: [{
         type: 'pie',
            name: 'Dev #1',
            data: [
                ['Processing.js', 5],
                ['Impact.js', 10],
                ['Other', 20],
                ['Ease.js', 22],
                ['Box2D.js', 25],
                ['WebGL', 28],
                ['DOM', 30],
                ['CSS', 40],
                ['Canvas', 80],
                ['Javascript', 90]
            ]
         }]
    });
    */
 
    // Switchers (of the Chart1 type) - onclick handler
    $('.switcher').click(function () {
        var newType = $(this).attr('id');
        ChangeChartType(chart1, chart1.series, newType);
    });
});

http://codepen.io/Ureech/pen/VPPBjp?editors=1010
Как мне там получить массив, вот в чём вопрос.

Добавлено через 4 минуты
Хотя, по идеи там и так массив

JavaScript
1
2
3
4
    series: [{
        name: 'Dev #1',
     data: [dat]
     }]

@j2FunOnly · 19.01.2017, 21:31

юрьич, вы в разделе JS хотите получить ответ как вам в шаблонизаторе PHP вставить данные из базы данных в виде массива?

@юрьич · 19.01.2017, 23:11 **[ТС]**

А в какой форум писать? Это общий вопрос php и js. И при чём здесь шаблонизатор, если js не работает.

Добавлено через 10 минут
Вот чисто js вопрос.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Once DOM (document) is finished loading
$(document).ready(function() {
  var leg = "15,15,18,40,30,25,60,60,80,70";
  var legs = leg.split(",");  
 
    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'line',
        height: 350,
     },
     title: {
        text: 'Изменение размеров шеи,талии и бёдер за 10 недель в %'
     },
     xAxis: {
        categories: [1,2,3,4,5,6,7,8,9,10]
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [ {
        name: 'Бёдра',
        data: legs        // [leg] так тоже не работает
     }]
    });
})

Так не работает, а если так
var legs = [15,15,18,40,30,25,60,60,80,70];
работает.

@sad67man · 19.01.2017, 23:50

юрьич,

JavaScript
1
2
var leg = "15,15,18,40,30,25,60,60,80,70";
  var legs = leg.split(",");

Тут у вас каждый элемент массива является строкой, нужно их привести к числу?

Добавлено через 7 минут

JavaScript
1
2
3
4
5
var leg = "15,15,18,40,30,25,60,60,80,70";
var legs = leg.split(",");
for(var i=0; i<legs.length; i++) {
    legs[i] = +legs[i];
}

Либо вот так

JavaScript
1
var data =[{$list}];

Добавлено через 47 секунд
юрьич, Вместо кавычек, поставить квадратные скобки.

@j2FunOnly · 20.01.2017, 09:46

Сообщение от юрьич

Вот чисто js вопрос.

String#split вернет массив строк. Надо привести его к числам, так как highcharts в целях производительности не делает преобразование типов:

Highcharts expects the data values to be numbers. The most common reason for this is that data is parsed from CSV or from a XML source, and the implementer forgot to run parseFloat on the parsed value.

For performance reasons internal type casting is not performed, and only the first value is checked (since 2.3).

JavaScript
1
var legs = leg.split(",").map(leg => parseInt(leg));

HTML5
1
<div id="chart_1" style="width:100%; height:400px;"></div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var leg = "15,15,18,40,30,25,60,60,80,70";
var legs = leg.split(",").map(leg => parseInt(leg));
 
// First chart initialization
chart1 = new Highcharts.Chart({
  chart: {
    renderTo: 'chart_1',
    type: 'line',
    height: 350,
  },
  title: {
    text: 'Изменение размеров шеи,талии и бёдер за 10 недель в %'
  },
  xAxis: {
    categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  },
  yAxis: {
    title: {
      text: 'Interviewed'
    }
  },
  series: [{
    name: 'Бёдра',
    data: legs // [leg] так тоже не работает
  }]
});

https://jsfiddle.net/j2FunOnly/akL36v8g/3/

Комментарий модератора

Код из песочницы дублируем на форуме!

Только это странно из базы взять данные и склеить в строку, чтобы потом в JS разбить на массив и привести с числовым значениям...

@юрьич · 20.01.2017, 09:53 **[ТС]**

sad67man, Большое спасибо, так заработало.
j2FunOnly, Просто эти данные уже взяты из базы для других нужд и попутно использую их в этом случае.

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@юрьич 14 / 9 / 13 Регистрация: 10.09.2012 Сообщений: 1,135
	19.01.2017, 15:36 [ТС]
	Не выходит.Посмотрел, что показывает alert(data.split(',')) тоже самое. И главное в консоле не показывает вместо переменой строку или массив, а просто имя. 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	19.01.2017, 15:41
	если браузер хром в консоли видно что это, массив, объект или строка 0

@юрьич 14 / 9 / 13 Регистрация: 10.09.2012 Сообщений: 1,135
	19.01.2017, 15:59 [ТС]
	Без разницы.Что там, что там.Только имя. Но там, где объявляю переменую в шаблоне var data ='{$list}'; показывает строку. Добавлено через 3 минуты Главное такой пример у них в доках http://www.highcharts.com/docs... a-database 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	19.01.2017, 16:08
	после отработки пхп посмотри исходные код страницы, там будет видно что на месте данных, строки или массив, есть ли кавычки и т.д. кстати в консоли ошибок нет? 0

@j2FunOnly the hardway first 2475 / 1847 / 910 Регистрация: 05.06.2015 Сообщений: 3,610
	19.01.2017, 21:31
	юрьич, вы в разделе JS хотите получить ответ как вам в шаблонизаторе PHP вставить данные из базы данных в виде массива? 0

@юрьич 14 / 9 / 13 Регистрация: 10.09.2012 Сообщений: 1,135
	20.01.2017, 09:53 [ТС]
	sad67man, Большое спасибо, так заработало. j2FunOnly, Просто эти данные уже взяты из базы для других нужд и попутно использую их в этом случае. 0

Построение графика

Решение