Highchart\Highstock

июля 03, 2014

Сайт
Странно, на русском языке примеров вообще нет. Все либо на сайте либо на стэке . Причем пиндосы достаточно активно пользуются этой библиотекой, даже тэги такие есть
Соберу значимые примеры
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]

]

Примеры как брать данные из файлов

Поиск по этому блогу

Des1roer Blog

Highchart\Highstock

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Пишем логи на C# (.NET). Легкий способ.

Учебник yii2

Yii 2 редактируемое дерево категорий