Highchart\Highstock
Сайт
Странно, на русском языке примеров вообще нет. Все либо на сайте либо на стэке . Причем пиндосы достаточно активно пользуются этой библиотекой, даже тэги такие есть
Соберу значимые примеры
52000 точек с указанием в легенде количества точек также с таймером за сколько строится график
Кастомная легенда
bootstrap datepicker вместо стандартного выбора даты. Внимание - работает только в chrome. Т.е. фидл работает только в хроме, а если будете делать сами, то и в фф будет работать - проверено
Кастомная кнопка
Пример годного графика с несколькими осями. Код - смотрим исходный код страницы
Пример на английском как добавить дэйтпикер. Хочу сразу уточнить - будет что-то вроде кастомной кнопки. С тем же успехом можно кнопки хоть где создавать а не лепить вплотную к графику. Может позднее покажу как это у меня сделано
Изменение позиции rangeselector`a
Rangeselector слева направо
Динамический график
статьи
бесполезные статьи на русском
1
2
Локализация
Highcharts.setOptions({
lang: {
loading: 'Загрузка...',
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'],
exportButtonTitle: "Экспорт",
printButtonTitle: "Печать",
rangeSelectorFrom: "С",
rangeSelectorTo: "По",
rangeSelectorZoom: "Период",
downloadPNG: 'Скачать PNG',
downloadJPEG: 'Скачать JPEG',
downloadPDF: 'Скачать PDF',
downloadSVG: 'Скачать SVG',
printChart: 'Напечатать график'
}
});
Пример с json
Странно, на русском языке примеров вообще нет. Все либо на сайте либо на стэке . Причем пиндосы достаточно активно пользуются этой библиотекой, даже тэги такие есть
Соберу значимые примеры
52000 точек с указанием в легенде количества точек также с таймером за сколько строится график
Кастомная легенда
bootstrap datepicker вместо стандартного выбора даты. Внимание - работает только в chrome. Т.е. фидл работает только в хроме, а если будете делать сами, то и в фф будет работать - проверено
Кастомная кнопка
Пример годного графика с несколькими осями. Код - смотрим исходный код страницы
Пример на английском как добавить дэйтпикер. Хочу сразу уточнить - будет что-то вроде кастомной кнопки. С тем же успехом можно кнопки хоть где создавать а не лепить вплотную к графику. Может позднее покажу как это у меня сделано
Изменение позиции rangeselector`a
Rangeselector слева направо
Динамический график
статьи
бесполезные статьи на русском
1
2
Локализация
Highcharts.setOptions({
lang: {
loading: 'Загрузка...',
months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
weekdays: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'],
shortMonths: ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июнь', 'Июль', 'Авг', 'Сент', 'Окт', 'Нояб', 'Дек'],
exportButtonTitle: "Экспорт",
printButtonTitle: "Печать",
rangeSelectorFrom: "С",
rangeSelectorTo: "По",
rangeSelectorZoom: "Период",
downloadPNG: 'Скачать PNG',
downloadJPEG: 'Скачать JPEG',
downloadPDF: 'Скачать PDF',
downloadSVG: 'Скачать SVG',
printChart: 'Напечатать график'
}
});
Пример с json
<?php header("Content-Type: text/html; charset=utf-8"); ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Конвейера</title> <link href="lib/examples.css" rel="stylesheet" type="text/css"> <script language="javascript" type="text/javascript" src="lib/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/highstock.js"></script> <script language="javascript" type="text/javascript" src="js/modules/exporting.js"></script> <link rel="stylesheet" type="text/css" href="lib/site.css" /> <link type="text/css" href="lib/latest.css" rel="Stylesheet" /> </head> <body> <p>ololo </p> <div id="container" style="height: 400px; min-width: 310px"></div> </body> </html> <script type="text/javascript"> $(document).ready(function() { $(function() { var seriesOptions = [], yAxisOptions = [], seriesCounter = 0, names = ['MSFT', 'AAPL', 'GOOG'], colors = Highcharts.getOptions().colors; $.each(names, function(i, name) { $.getJSON('/jsonp.php?filename='+ name.toLowerCase() , function(data) { seriesOptions[i] = { name: name, data: data }; // As we're loading the data asynchronously, we don't know what order it will arrive. So // we keep a counter and create the chart when all the data is loaded. seriesCounter++; if (seriesCounter == names.length) { createChart(); } }); }); // create the chart when all data is loaded function createChart() { $('#container').highcharts('StockChart', { rangeSelector: { inputEnabled: $('#container').width() > 480, selected: 4 }, yAxis: { labels: { formatter: function() { return (this.value > 0 ? '+' : '') + this.value + '%'; } }, plotLines: [{ value: 0, width: 2, color: 'silver' }] }, plotOptions: { series: { compare: 'percent' } }, tooltip: { pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', valueDecimals: 2 }, series: seriesOptions }); } }); }); </script>json.php
при этом должен иметь вид
[ [1147651200000,67.79], [1147737600000,64.98], [1147824000000,65.26], [1147910400000,63.18], [1147996800000,64.51], [1148256000000,63.38], [1148342400000,63.15], [1148428800000,63.34], [1148515200000,64.33], [1148601600000,63.55], [1148947200000,61.22], [1149033600000,59.77], [1149120000000,62.17], [1149206400000,61.66], [1149465600000,60.00]
]
Примеры как брать данные из файлов
Здравствуйте, а можно исходники. У меня не работает.
ОтветитьУдалитьhttps://drive.google.com/open?id=0B8SBzylZ-emOaUN5eXZTYll3U0k&authuser=0
Удалить