Еще одна библиотека построения графиков на JavaScript

Я уже писал про библиотеку построения графиков на JavaScript — HIGHCHARTS, теперь хочу рассказать еще про одну библиотеку, с помощью которой можно очень легко разместить у себя на сайте интерактивные графики.

Для чего можно использовать такую библиотеку? Применений может быть множество, например вывод графика роста производства, персонала или прибыли компании, доли компании на рынке. Вы можете показать какими браузерами пользуются посетители вашего сайта в виде круговой диаграммы или что-то еще.

Библиотека называется CanvasJS. Для использования библиотеки в коммерческих продуктах ее необходимо купить, в этом случае вы также получаете тех. поддержку и право изменять исходный код под свои нужды, но если вы планируете использовать ее на своем личном сайте, то ее можно получить бесплатно. Скачать библиотеку можно на этой странице http://canvasjs.com/download-html5-charting-graphing-library/.

В CanvasJS встроенной огромное количество диаграмм которые можно построить. Это гистограммы, линейные графики, диаграмма с областями, круговая диаграмма и другие. Для создания простого графика необходимо минимум знаний в JavaScript и HTML. CanvasJS также поддерживает обновление диаграммы в реальном времени, например вы можете использовать это для отображения температуры.

Ниже примеры диаграмм, с исходным кодом и пояснениями:

CanvasJS-charts-library-column

<!DOCTYPE HTML>
<html>
<head>
/* Подключение библиотеки */
<script type="text/javascript" src="canvasjs.min.js"></script>
<script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
           /*Заголовок диаграммы*/
        text: "Top Oil Reserves"
      },
      /*
      Включить - true или отключить - false анимацию
      при построении диаграммы
      */
      animationEnabled: true,
      /*Заголовок по оси Y*/
      axisY: {
        title: "Reserves(MMbbl)"
      },
      /*Расположение легенды*/
      legend: {
           /*выравнивание легенды по вертикали*/
        verticalAlign: "bottom",
        /*выравнивание легенды по горизонтали*/
        horizontalAlign: "center"
      },
      /*Тема (внешний вид) диаграммы*/
      theme: "theme2",
      /*Блок данных*/
      data: [
      {
           /*
                Тип диаграммы, в данном случае гистограмма
                Все возможные варианты можно посмотреть тут: http://canvasjs.com/docs/charts/chart-types/
           */    
        type: "column",
        /*Отображать или нет легенду - true/false*/
        showInLegend: true, 
        /*Цвет маркера легенды*/
        legendMarkerColor: "grey",
        /*Текст легенды*/
        legendText: "MMbbl = one million barrels",
        /*Данные для построение диаграммы*/
        dataPoints: [      
        /*Данные для построения графика*/
        {y: 297571, label: "Venezuela"},
        {y: 267017,  label: "Saudi" },
        {y: 175200,  label: "Canada"},
        {y: 154580,  label: "Iran"},
        {y: 116000,  label: "Russia"},
        {y: 97800, label: "UAE"},
        {y: 20682,  label: "US"},        
        {y: 20350,  label: "China"}        
        ]
      }   
      ]
    });
     /* выполнить построение диаграммы */
    chart.render();
  }
</script>
</head>
<body>
     <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

В коде ниже я буду комментировать только новые/отличные опции.

CanvasJS-charts-library-column-02

CanvasJS-charts-library-range_bar

CanvasJS-charts-library-line

<!DOCTYPE HTML>
<html>
<head>  
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      theme: "theme2",
      title:{
        text: "Earthquakes - per month"
      },
      animationEnabled: true,
      axisX: {
        valueFormatString: "MMM",
        /* интервал разметки по оси X */
        interval:1,
        /* 
             Единицы разметки по оси X
             по умолчанию устанавливается как число.
             Возможные варианты:
             number - число
             millisecond - милисекунды
             second - секунды
             minute - минуты
             hour - часы
             day - дни
             month - месяцы
             year - года
         */
        intervalType: "month"
        
      },
      axisY:{
           /* 
                Начианать отсчет по оси Y с нуля или нет
                true - да, false - нет
           */
        includeZero: false
        
      },
      data: [
      {        
        type: "line",
        /* Толщина линии графика */
        lineThickness: 2,
        dataPoints: [
        { x: new Date(2012, 00, 1), y: 450 },
        { x: new Date(2012, 01, 1), y: 414},
        /* 
             Пояснения к конкретной точки графика:
             indexLabel - полпись
             markerColor - цвет
             markerType - значок
         */
        { x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
        { x: new Date(2012, 03, 1), y: 460 },
        { x: new Date(2012, 04, 1), y: 450 },
        { x: new Date(2012, 05, 1), y: 500 },
        { x: new Date(2012, 06, 1), y: 480 },
        { x: new Date(2012, 07, 1), y: 480 },
        { x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
        { x: new Date(2012, 09, 1), y: 500 },
        { x: new Date(2012, 10, 1), y: 480 },
        { x: new Date(2012, 11, 1), y: 510 }
        
        ]
      }
      
      
      ]
    });

chart.render();
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script></head>
<body>
     <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

CanvasJS-charts-library-line-03

CanvasJS-charts-library-line-02

CanvasJS-charts-library-area

<!DOCTYPE HTML>
<html>
<head>  
<script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
        title: {
            text: "Email Analysis"             
        },
        animationEnabled: true,
        axisX:{      
            interval: 3,
            /* Угол наклона подписей по оси X */
            labelAngle : 45,
            /* Задать формат вывода
            Подробнее про все форматы можно посмотреть http://canvasjs.com/docs/charts/chart-options/axisx/valueformatstring/ */
            valueFormatString: "HHmm'hrs'"
        },
        axisY: {
            title: "Number of Messages"
        },
        legend: {
            verticalAlign: "bottom",
            horizontalAlign: "center"
        },

        data: [{        
            name: "received",
            showInLegend: true,
            /* Маркеры легенды */
            legendMarkerType: "square",
            type: "area",
            /* Цвет данного графика */
            color: "rgba(40,175,101,0.6)",
            /* Размер маркера на графике */
            markerSize: 0,
            
            dataPoints: [
            {x:new Date(2013,0,1,00,00) ,label: "midnight", y: 7  },
            {x:new Date(2013,0,1,01,00) , y: 8},
            {x:new Date(2013,0,1,02,00) , y: 5},
            {x:new Date(2013,0,1,03,00) , y: 7},
            {x:new Date(2013,0,1,04,00) , y: 6},
            {x:new Date(2013,0,1,05,00) , y: 8},
            {x:new Date(2013,0,1,06,00) , y: 12},
            {x:new Date(2013,0,1,07,00) , y: 24},
            {x:new Date(2013,0,1,08,00) , y: 36},
            {x:new Date(2013,0,1,09,00) , y: 35},
            {x:new Date(2013,0,1,10,00) , y: 37},
            {x:new Date(2013,0,1,11,00) , y: 29},         
            {x:new Date(2013,0,1,12,00) , y: 34, label: "noon" },                
            {x:new Date(2013,0,1,13,00) , y: 38},
            {x:new Date(2013,0,1,14,00) , y: 23},
            {x:new Date(2013,0,1,15,00) , y: 31},
            {x:new Date(2013,0,1,16,00) , y: 34},
            {x:new Date(2013,0,1,17,00) , y: 29},
            {x:new Date(2013,0,1,18,00) , y: 14},
            {x:new Date(2013,0,1,19,00) , y: 12},
            {x:new Date(2013,0,1,20,00) , y: 10},
            {x:new Date(2013,0,1,21,00) , y: 8},
            {x:new Date(2013,0,1,22,00) , y: 13},
            {x:new Date(2013,0,1,23,00) , y: 11} 
            ]
        },
        {        
            name: "sent",
            showInLegend: true,
            legendMarkerType: "square",
            type: "area",
            color: "rgba(0,75,141,0.7)",
            markerSize: 0,
            label: "",
            dataPoints: [

            {x:new Date(2013,0,1,00,00) , label: "midnight", y: 12  },
            {x:new Date(2013,0,1,01,00) , y: 10},
            {x:new Date(2013,0,1,02,00) , y: 3},
            {x:new Date(2013,0,1,03,00) , y: 5},
            {x:new Date(2013,0,1,04,00) , y: 2},
            {x:new Date(2013,0,1,05,00) , y: 1},
            {x:new Date(2013,0,1,06,00) , y: 3},
            {x:new Date(2013,0,1,07,00) , y: 6},
            {x:new Date(2013,0,1,08,00) , y: 14},
            {x:new Date(2013,0,1,09,00) , y: 15},
            {x:new Date(2013,0,1,10,00) , y: 21},
            {x:new Date(2013,0,1,11,00) , y: 24},         
            {x:new Date(2013,0,1,12,00) , y: 28, label: "noon" },                
            {x:new Date(2013,0,1,13,00) , y: 26},
            {x:new Date(2013,0,1,14,00) , y: 17},
            {x:new Date(2013,0,1,15,00) , y: 23},
            {x:new Date(2013,0,1,16,00) , y: 28},
            {x:new Date(2013,0,1,17,00) , y: 22},
            {x:new Date(2013,0,1,18,00) , y: 10},
            {x:new Date(2013,0,1,19,00) , y: 9},
            {x:new Date(2013,0,1,20,00) , y: 6},
            {x:new Date(2013,0,1,21,00) , y: 4},
            {x:new Date(2013,0,1,22,00) , y: 12},
            {x:new Date(2013,0,1,23,00) , y: 14}
            ]
        }
        ]
    });

chart.render();
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
     <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

CanvasJS-charts-library-line-area

CanvasJS-charts-library-range_area

CanvasJS-charts-library-pie

<!DOCTYPE HTML>
<html>
<head>  
<script type="text/javascript">
window.onload = function () {
     var chart = new CanvasJS.Chart("chartContainer",
     {
          title:{
               text: "Gaming Consoles Sold in 2012"
          },
                animationEnabled: true,
          legend:{
               verticalAlign: "bottom",
               horizontalAlign: "center"
          },
          data: [
          {
               /* Шрифт на диаграмме */
               /* Размер */
               indexLabelFontSize: 20,
               /* Семейство шрифтов */
               indexLabelFontFamily: "Monospace",       
               /* Цвет шрифта */
               indexLabelFontColor: "darkgrey", 
               /* Цвет линий */
               indexLabelLineColor: "darkgrey",
               /* Легенда внутри диаграммы или снаружи */
               indexLabelPlacement: "outside",
               type: "pie",       
               showInLegend: true,
               /* что выводить на всплывающей подсказке
               В данном случает - значение, значение в процентах */
               toolTipContent: "{y} - <strong>#percent%</strong>",
               dataPoints: [
                    {  y: 4181563, legendText:"PS 3", indexLabel: "PlayStation 3" },
                    {  y: 2175498, legendText:"Wii", indexLabel: "Wii" },
                    {  y: 3125844, legendText:"360",exploded: true, indexLabel: "Xbox 360" },
                    {  y: 1176121, legendText:"DS" , indexLabel: "Nintendo DS"},
                    {  y: 1727161, legendText:"PSP", indexLabel: "PSP" },
                    {  y: 4303364, legendText:"3DS" , indexLabel: "Nintendo 3DS"},
                    {  y: 1717786, legendText:"Vita" , indexLabel: "PS Vita"}
               ]
          }
          ]
     });
     chart.render();
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
     <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

CanvasJS-charts-library-pie-02

CanvasJS-charts-library-bubble

<!DOCTYPE HTML>
<html>
<head>  
     <script type="text/javascript">
     window.onload = function () {
          var chart = new CanvasJS.Chart("chartContainer",
          {
               zoomEnabled: true,
                        animationEnabled: true,
               title:{
                    text: "Employment In Agriculture VS Agri-Land and Population"      
                    
               },
               axisX: {
                    title:"Employment - Agriculture",
                    
                    valueFormatString: "#0'%'",
                    /* Максимальное значение, все что больше обрезается */
                    maximum: 100,
                    /* Толщина вспомогательной решетки на диаграмме */
                    gridThickness: 1,
                    /* толщина линни сноски подписи к оси */
                    tickThickness: 1,
                    /* цвет вспомогательной решетки */
                    gridColor: "lightgrey",
                    /* цвет сноски */
                    tickColor: "lightgrey",
                    lineThickness: 0
               },
               axisY:{
                    title: "Agricultural Land(sq.km)",              
                    gridThickness: 1,
                    tickThickness: 1,
                    gridColor: "lightgrey",
                    tickColor: "lightgrey",
                    lineThickness: 0,                
                    valueFormatString: "#0'mn'"

               },

               data: [
               {        
                    type: "bubble",                   
                    toolTipContent: "<span style='\"'color: {color};'\"'><strong>{name}</strong></span><br/><strong>Employment</strong> {x}% <br/> <strong>Agri Land</strong> {y} million sq. km<br/> <strong>Population</strong> {z} mn",
                    dataPoints: [

                    { x: 39.6, y: 5.225, z:1347,  name:"China" },
                    { x: 3.3, y: 4.17, z:21.49,  name:"Australia" },
                    { x: 1.5, y: 4.043, z:304.09,  name:"US" },
                    { x: 17.4, y: 2.647, z:2.64,  name:"Brazil" },
                    { x: 8.6, y: 2.154, z:141.95,  name:"Russia" },
                    { x: 52.98, y: 1.797, z:1190.86,  name:"India" },
                    { x: 4.3, y: 1.735, z:26.16,  name:"Saudi Arabia" },
                    { x: 1.21, y: 1.41, z:39.71,  name:"Argentina" },
                    { x: 5.7, y: .993, z:48.79,  name:"SA" },
                    { x: 13.1, y: 1.02, z:110.42,  name:"Mexico" },
                    { x: 2.4, y: .676, z:33.31,  name:"Canada" },
                    { x: 2.8, y: .293, z:64.37,  name:"France" },
                    { x: 3.8, y: .46, z:127.70,  name:"Japan" },
                    { x: 40.3, y: .52, z:234.95,  name:"Indonesia" },
                    { x: 42.3, y: .197, z:68.26,  name:"Thailand" },
                    { x: 31.6, y: .35, z:78.12,  name:"Egypt" },
                    { x: 1.1, y: .176, z:61.39,  name:"U.K" },
                    { x: 3.7, y: .144, z:59.83,  name:"Italy" },
                    { x: 1.8, y: .169, z:82.11,  name:"Germany" }
                    ]
               }
               ]
          });

chart.render();
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
     <div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

CanvasJS-charts-library-bubble-dots

Более подробно обо всех опциях использования библиотеки можно посмотреть в официальной документации:
http://canvasjs.com/docs/charts/basics-of-creating-html5-chart

Добавить комментарий