Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   красивые графики для сайта (https://javascript.ru/forum/misc/49265-krasivye-grafiki-dlya-sajjta.html)

him 05.08.2014 13:10

красивые графики для сайта
 
стоит задача, нарисовать красивые графики на сайте.
погуглился.
нашел некий пакет для freebsd - mrtg. не очень.
нашел rrdtool тоже не очень.

наткнулся на графики погоды:
http://meteoinfo.ru/zaoknom
очень понравились.

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

WorM32 05.08.2014 13:14

Полагаю, что это Highcharts.

kobezzza 05.08.2014 13:14

Цитата:

подскажите, это какая то стандартная библиотека используется?
highcharts, а вообще библиотек для этого много существует.

tsigel 05.08.2014 13:18

https://google-developers.appspot.co...e/docs/gallery

him 05.08.2014 15:27

https://google-developers.appspot.co...echart#Example

смотрю опции:
hAxis.gridlines.count number 5

var options = {
    title: 'Название графика',
    curveType: 'function',
    legend: { position: 'bottom' },
	hAxis: {title: 'Название оси по горизонтали'},
        vAxis: {title: 'Название оси по вертикали'},
hAxis: {gridlines: {count: 20}}
  };


а что то 20 осей не появляется...
что не так делаю?

а если hAxis поменят на vAxis то появляются, правда горизонтальные.
надо как то включить вертикальные?

tsigel 05.08.2014 17:53

him,
var options = {
    title: 'Название графика',
    curveType: 'function',
    legend: {
        position: 'bottom' 
    },
    hAxis: {
       title: 'Название оси по горизонтали',
       gridlines: {
             count: 20
       }
    },
    vAxis: {
       title: 'Название оси по вертикали'
    }
  };

him 05.08.2014 18:23

<html>
  <head>
	<meta charset="utf-8">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'My', 'Test'],
          ['2004',  1000,      400, 20, 1200],
          ['2005',  1170,      460, 300, 1000],
          ['2006',  660,       1120, 200, 1100],
          ['2007',  1030,      540, 900, 200],
		['2008',  103,      240, 400, 600],
		['2009',  840,      640, 1200, 1100],
		['2010',  230,      1040, 100, 300],
		['2011',  1220,      140, 500, 100]
        ]);

  var options = {
    title: 'Название графика',
    curveType: 'function',
    legend: { position: 'bottom' },
	hAxis: {title: 'Название оси по горизонтали', gridlines: {count: 2}},
        vAxis: {title: 'Название оси по вертикали', gridlines: {count: 20}}

  };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>


двух вертикальных нету, а 20 горизонтальных есть.
что то где то надо включить?

him 06.08.2014 11:43

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

так ни хватает примеров....


Часовой пояс GMT +3, время: 09:41.