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

@юрьич · Регистрация: 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, Просто эти данные уже взяты из базы для других нужд и попутно использую их в этом случае.

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

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

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

Решение