Как через код элемента изменить диаграмму

Сейчас все активно обсуждают радости и гадости удалённой работы, и мы даже выпустили статью на эту тему. А ещё провели небольшой опрос и попросили наших пользователей рассказать, с какими трудностями они сталкиваются во время работы дома (спойлер — все ленятся). Статистику нужно как-то красиво оформить, так почему бы не сделать SVG-график? Заодно научимся чему-нибудь новому. Поехали!

Давайте немного поговорим о том, что такое SVG. Это формат векторной графики, который позволяет растягивать и сжимать изображения без потери качества, очень удобно. Такая возможность реализована за счёт крутой особенности SVG — фактически это обычный код. Каждое изображение описано опорными точками, кривыми и простыми фигурами, которые представляют из себя строки кода, их можно изменять в обычном редакторе. И, конечно, SVG-элементы можно создавать с нуля самим.

Именно этим и займёмся — создадим SVG-диаграмму и легенду к ней, а затем стилизуем всё с помощью CSS и в самом конце добавим немного JavaScript-магии. Вам понадобятся базовые знания HTML, CSS и JavaScript. Если их пока нет — самое время пройти бесплатные тренажёры, а после этого вернуться к туториалу.

Создаём диаграмму

1. Подготовка

Начнём с родительского блока. График и легенда будут лежать внутри элемента .canvas, который мы сделаем флекс-контейнером, чтобы выровнять дочерние элементы внутри него.

<div class="canvas"></div>

.canvas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 800px;
}

2. Добавляем SVG

Есть разные методы вставки SVG-элементов, самый подходящий для наших целей — вставить код элемента непосредственно в HTML, то есть заинлайнить. Это способ позволяет изменять свойства SVG-элементов и фигур прямо из CSS. Добавим разметку диаграммы:

<div class="canvas">
  <svg class="chart" width="500" height="500" viewBox="0 0 50 50">
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
    <circle class="unit" r="15.9" cx="50%" cy="50%"></circle>
  </svg>
</div>

Мы использовали тег svg — специальный тег для создания SVG-элемента, задали элементу размеры с помощью width и height, а ещё добавили атрибут viewBox. Для чего он нужен? Вообще содержимое SVG-элемента отрисовывается на бесконечном холсте, и изменение размеров элемента не влияет на его содержимое. С помощью viewBox как раз можно задать область отрисовки, которая будет растягиваться и сжиматься в зависимости от размеров. В нашем случае первые два нуля в значении — это координаты верхнего левого угла области (начало отсчёта системы координат), а следующие два числа — ширина и высота соответственно.

Внутри SVG-элемента мы нарисовали несколько одинаковых окружностей, задав радиус и центр окружности с помощью тега circle и его атрибутов, где: r — радиус окружности, cx— координата центра окружности по горизонтальной оси, а cy — по вертикальной. По умолчанию центр окружности расположен в начале координат — левом верхнем углу, поэтому мы задаём значение 50%, чтобы окружность находилась по центру.

Количество окружностей равно количеству секций в диаграмме. У нас их будет семь.

3. Создаём секции

На прошлом шаге мы получили обычные окружности, но хотелось бы превратить их в диаграмму в виде пончика, то есть нужно как-то вырезать середину. Мы реализуем это с помощью добавления обводки окружности. Оставим только её и уберём заливку самой фигуры — fill.

.unit {
  fill: none;
  stroke-width: 10;
}

.unit:nth-child(1) {
  stroke: #86cfa3;
}

.unit:nth-child(2) {
  stroke: #a2c6e0;
}

.unit:nth-child(3) {
  stroke: #ffc7ec;
}

/* Далее ещё четыре секции по аналогии */

Свойство stroke-width задаёт толщину обводки — она у всех секций одинаковая. А цвет разный, поэтому свойство stroke, которое за него отвечает, мы прописали отдельно для каждой окружности. Кстати, мы не указываем единицы измерения у свойств обводки, потому что по умолчанию это пиксели, и нам нужны именно они.

На данном этапе каждая секция занимает всю окружность, нам нужно изменить это поведение. Для этого используем свойство stroke-dasharray. Оно предназначено для создания пунктирных обводок и в качестве значения принимает длину отрезков и пробелов между ними. В нашем случае мы используем свойство не совсем традиционным способом: отрезок будет только один — сама секция, а вся остальная окружность — это пробел.

Ещё учтём, что по умолчанию все секции будут начинаться из одной точки, а нам нужно расположить их одну за другой по кругу. Чтобы добиться нужного поведения, используем свойство stroke-dashoffset — оно позволит сдвинуть обводку на нужное нам расстояние.

.unit:nth-child(1) {
  stroke: #86cfa3;
  stroke-dasharray: 8 100;
}

.unit:nth-child(2) {
  stroke: #a2c6e0;
  stroke-dasharray: 11 100;
  stroke-dashoffset: -8;
}

.unit:nth-child(3) {
  stroke: #ffc7ec;
  stroke-dasharray: 11 100;
  stroke-dashoffset: -19;
}

/* Далее ещё четыре секции по аналогии */

Давайте подробнее остановимся на значении свойства stroke-dashoffset. У первой секции этого свойства нет, потому что её не нужно никуда сдвигать, а у остальных сдвиг равен длине всех предшествующих секций. То есть у второго элемента сдвиг равен длине первой секции, у третьего — длине первой и второй секции и так далее. Значение отрицательное, потому что сдвигаем по часовой стрелке, а по умолчанию сдвиг идёт против.

4. Немного математики

Можно пропустить, если вы не любите математику.

Возможно, вы заметили, что на втором шаге мы задали окружностям довольно странный радиус — 15.9, и теперь пришло время рассказать, почему значение именно такое.

В графиках используются данные в процентах, то есть каждая секция диаграммы иллюстрирует какой-то процент от общего количества. В нашем случае длина секции, которая была прописана первым значением у свойства stroke-dasharray, должна отражать этот процент, то есть 100% соответствует длине всей окружности, а n% — длине секции. В таком случае, чтобы найти длину окружности, нам нужно вспомнить школьную формулу C = 2πr. Вот здесь мы схитрим и изначально договоримся, что длина окружности будет равна 100px, и тогда путём нехитрых вычислений выведем из формулы радиус, равный примерно 15.9px. Вот откуда появилось значение.

Для чего это было нужно? Допустим, нас попросили построить диаграмму по некоторым статистическим данным: 1% котов рыжие (и любят командовать), а 99% котов — других цветов. Благодаря тому, что мы приравняли длину всей окружности к 100, длина секций будет равна проценту из статистики — 1 и 99 соответственно. Это очень удобно. Если бы мы пошли альтернативным путём и не стали отталкиваться от длины окружности, то для каждого процента приходилось бы вычислять длину секции из пропорции, и она была бы дробным числом с кучей знаков после запятой.

Здесь стоит отметить, что нам помогает провернуть этот хак атрибут viewBox, который был задан в самом начале SVG-элементу. Масштабируя область видимости, мы может управлять размером диаграммы. При этом радиус окружности изменять не будем — мы зафиксировали его значение по причинам, изложенным выше.

Вот откуда взялась длина секции в свойстве stroke-dasharray — это процент, который занимает каждая секция диаграммы согласно данным статистики.

5. Легенда

Диаграмма готова, а теперь давайте добавим к ней легенду с описанием секций. Мы не будем изобретать ничего сложного, поэтому пробежимся по основным этапам вскользь:

1. Добавляем разметку легенды внутрь элемента .canvas:

   <div class="legend">
     <p class="title">Что мешает во время работы дома?</p>    
     <ul class="caption-list">
       <li class="caption-item">еда</li>
       <li class="caption-item">соседи</li>
       <li class="caption-item">отсутствие рабочего места</li>
       <li class="caption-item">мало двигаюсь</li>
       <li class="caption-item">отсутствие чёткого графика работы</li>
       <li class="caption-item">неудобная коммуникация с коллегами</li>
       <li class="caption-item">много ленюсь</li>
     </ul>
   </div>

2. Убираем лишние отступы и маркеры у списка, задаём отступы нужным элементам, указываем максимальную ширину всего блока с легендой, стилизуем текст и добавляем эффект при наведении на название секции:

   .legend {
     max-width: 250px;
     margin-left: 30px;
   }
   
   .title {  
     font-family: "Verdana", sans-serif;
     font-size: 18px;
     line-height: 21px;
     color: #591d48;
   }
   
   .caption-list {
     margin: 0;
     padding: 0;
     list-style: none;
   }
   
   .caption-item {
     position: relative;
   
     margin: 20px 0;
     padding-left: 30px;
     
     font-family: "Verdana", sans-serif;
     font-size: 16px;
     line-height: 18px;
     color: #591d48;  
     cursor: pointer;
   }
   
   .caption-item:hover {
     opacity: 0.8;
   }

3. На прошлом этапе мы убрали встроенные маркеры у списка и добавили паддинг слева у его элементов, подготовив место для кастомных маркеров. Теперь создадим их с помощью псевдоэлемента beforeи добавим такие же цвета, как у секций диаграммы:

   .caption-item::before {
     content: "";
     
     position: absolute;
     top: 0;
     left: 0;
     
     width: 20px;
     height: 20px;
     
     border-radius: 8px;
   }
   
   .caption-item:nth-child(1)::before {
     background-color: #86cfa3;
   }
   
   .caption-item:nth-child(2)::before {
     background-color: #a2c6e0;
   }
   
   .caption-item:nth-child(3)::before {
     background-color: #ffc7ec;
   }
   
   /* Далее ещё четыре секции по аналогии */

   Готово! Теперь у нас есть диаграмма и легенда к ней.

Добавляем немного интерактивности

Всё хорошо, но не помешало бы сделать диаграмму более живой. Давайте добавим небольшую анимацию во время отрисовки и эффекты при наведении.

1. Анимация

В предыдущем туториале мы уже разбирали, как сделать простую анимацию. Если вы никогда не делали анимации на CSS, будет полезно для начала прочитать его.

Давайте добавим анимацию во время отрисовки секций диаграммы. Для этого будем постепенно изменять свойство stroke-dasharray, начиная с нуля и заканчивая теми значениями, которые мы указали ранее — для каждой секции оно своё. То есть длина секции будет постепенно возрастать от нуля до нужного значения.

Для создания анимации используем ключевое слово @keyframes, зададим название анимации и укажем состояние в начальной точке — 0%:

@keyframes render {
  0% {
    stroke-dasharray: 0 100;
  }
}

Мы намеренно не указали состояние в конечной точки анимации — 100%, так как у каждой секции своя длина. В данном случае после выполнения анимации свойство stroke-dasharray примет то значение, которое мы уже прописали ранее для каждой секции. Так работает анимация — по окончании элемент возвращается в исходное состояние.

Теперь добавим к уже имеющимся свойствам элемента .unit новые — animation-name и animation-duration. Они позволят задать название и продолжительность анимации и применить её к секциям диаграммы.

.unit {
  /* Здесь должны быть свойства, заданные ранее */

  animation-name: render;
  animation-duration: 1.5s; 
}

Всё работает — секции постепенно появляются в течение заданного времени.

2. Эффект при наведении

Добавим плавное увеличение секции при наведении на неё. Используем псевдокласс hover, чтобы увеличить толщину обводки наших окружностей-секций и добавить им полупрозрачность.

.unit:hover {
  opacity: 0.8;
  stroke-width: 12;
}

Сейчас переход между состояниями происходит резко, но это поведение можно изменить с помощью плавных переходов. Укажем свойства, которые нужно изменять плавно (в нашем случае все), и длительность перехода — за это отвечают transition-property и transition-duration.

.unit {
  /* Здесь должны быть свойства, заданные ранее */

  transition-property: all; 
  transition-duration: 1.5s;
}

Теперь переход между состояниями происходит плавно.

3. Немного JavaScript

Всё почти готово, но хочется ещё создать связь между легендой и диаграммой. В этом нам поможет JavaScript. Если вы пока с ним не знакомы, то познакомьтесь. Оно того стоит, правда.

Мы напишем небольшой скрипт, который позволит выделять нужную секцию при наведении на её название в легенде. Эффекты будем использовать точно такие же, как при наведении на саму секцию. Мы уже прописали их для .unit:hover, поэтому теперь просто продублируем для специального класса hovered, который далее будем использовать в JavaScript-коде.

.hovered {
  opacity: 0.8;
  stroke-width: 12;
}

Вот шаги, которые должны быть реализованы в скрипте:

1. Найти все названия секций в легенде.
2. Найти все секции диаграммы.
3. Добавить каждому названию секции отслеживание событий наведения и снятия курсора.
4. Внутри обработчиков этих событий добавлять или удалять класс hovered у секций диаграммы в зависимости от положения курсора.

let captionsList = document.querySelectorAll('.caption-item');
let unitsList = document.querySelectorAll('.unit');

captionsList.forEach(function (item, index) {
  item.addEventListener('mouseover', function () {
     unitsList[index].classList.add('hovered');
  });
  
  item.addEventListener('mouseout', function () {
     unitsList[index].classList.remove('hovered');
  });
});

Здесь мы отслеживаем движение мыши с помощью событий mouseover (курсор над элементом) и mouseout (курсор уходит с элемента). А для поиска нужной секции используем совпадение порядковых номеров названий в легенде и секций диаграммы — index названия = index секции. Нужно учесть, что их всегда должно быть равное количество.

Вот теперь диаграмма готова! Весь код, который мы написали в туториале, доступен на CodePen.

See the Pen
svg pie chart by sasha_htmlacademy (@sasha-sm)
on CodePen.

Полезности

• Подборка графиков на CodePen. Всех видов и разного уровня сложности.
• Как правильно вставлять SVG. В туториале мы инлайнили SVG, но в других ситуациях — другие способы.
• Размеры в SVG. В этой статье можно подробнее почитать о том, как работает viewBox, но не только.
• Движение мыши: mouseover/out. Подробнее о работе этих событий.
• Курс «Основы SVG». Обо всём, что касается создания и оформления SVG-фигур.
• Курс «Динамические эффекты». Здесь можно изучить плавные переходы и анимацию, которые мы только поверхностно затронули в туториале.

Introduction

Organizational charts allow representing the hierarchical structure of an organization in easy to understand way. They’re not supposed to be fancy, but it’s always important to have the possibility to change the appearance of an organizational chart the way you want. In this article, we’ll take a look at how you can create custom styles for hierarchical diagrams made with the JavaScript diagram library made by DHTMLX team. 

Initialize a Diagram on the Page

You should download dhtmlxDiagram library and add one js and one css file on the page:

<script src="codebase/diagram.js"></script>   
<link href="codebase/diagram.css" rel="stylesheet">

Now, you can create a new DIV container that will hold the org chart diagram and initialize it:

<body>
    <div id="my_diagram"></div>
    <script type="text/javascript">
        var myDiagram = new dhx.Diagram("my_diagram", {type: "org"});
    </script>
</body>

The construction takes the ID of th DIV container as a parameter. The type property is a mandatory attribute that allows choosing what type of the diagram you’re going to create. Besides that, there’s a set of optional properties that allow configuring the diagram.

Now you can initialize the diagram with data. To create a new dataset, you can use inline JSON object:

var my_dataset = [
   {
       id: "1",
       text: "Chairman & CEO",
       title: "Henry Bennett"
   },
   {
       id: "2",
       text: "Manager",
       title: "Mildred Kim"
   },
   {
       id: "3",
       text: "Technical Director",
       title: "Jerry Wagner"
   },
   { id: "1-2", from: "1", to: "2", type: "line" },
   { id: "1-3", from: "1", to: "3", type: "line" }
];

As you can see, our diagram will contain three nodes. We’ve defined IDs, the text, and title for each node. Besides that, we’ve defined the connections between the nodes.

After you create the data, you can use the parse method to load it into the diagram:

myDiagram.parse(my_dataset);

If you open the page in your browser, you’ll see the default organizational diagram:

Now, let’s take a look at how we can change the appearance of this diagram.

Changing the Appearance of Your Org Chart

Changind the Scale

If you want to create a mobile app that works with organograms, the possibility to change the scale of the diagram will be useful. For this task, you can change the value of the scale property. The default value is 1. You can set the property to value larger than 1 to zoom in. To zoom out, use value smaller than 1.

Here’s how it works:

var myDiagram = new dhx.Diagram("my_diagram", {
            type: "org",
           
           scale: 0.75
});

The result is shown below:

Changing Type of Shape

By default, the dhtmlxDiagram library uses the card shape type for its nodes. Besides that, you can use two additional types: img-card that allows adding shapes with images, and svg-card that allows rendering shapes in Internet Explorer. Let’s see how the img-card type works.

You can use the defaultShapeType attribute to set the default type for all the shapes of the diagram:

var myDiagram = new dhx.Diagram("my_diagram", {
      type: "org",
      scale: 0.75,
      defaultShapeType: "img-card"
});

Another option is to define an individual type for a particular node of the diagram using the type attribute of the data item object. Here’s an example:

var my_dataset = [
      {
               id: "1",
               text: "Chairman & CEO",
               title: "Henry Bennett",
               type: "img-card",    
               img:"./path/to/file.png"
      },
];

If you open the diagram in your browser, you’ll see that the corresponding node now contains an image:

Changing the Positioning of Nodes

It’s possible to change the position of a diagram and define margins for the nodes of the diagram. To do so, you can use the margin attribute. It contains the following properties:

• itemX defines horizontal space between two shapes

• itemY defines vertical space between two shapes

• x defines horizontal space between the diagram container and the first node

• y defines vertical space between the diagram container and the first node

Here’s how you can set the required values:

var myDiagram = new dhx.Diagram("my_diagram", {
             type: "org",
             margin:{
             x:30,
             y:30,
             itemX:80,
             itemY:80
          }
});

Using this code, you’ll get the following result:

Using CSS to Change the Style

There are two classes that allow changing the style of your diagram. .dhx_item_shape allows changing the style of the shape. Changing the .shape_content CSS class, you can modify the content of the shape.

Besides that, you can change the appearance of the connectors between the nodes. You can define a custom CSS class and use it the configuration object. Let’s consider a small example. Here’s some CSS code:

.myStyle .shape_content {
       background: #9575CB;
       color: #FFF;
   }

.myStyle:hover .shape_content {
       background: #00B7FE;
   }

.myConnector {
       stroke: red;
       stroke-dasharray: 10;
   }

Now, you can create a dataset and define a custom style for a particular shape or connector. There are four attributes that allow changing the appearance and size of an element of the diagram:

• css allows setting the name of the CSS class that will be applied to the shape

• color defines the color of the shape’s header

• height allows adjusting the height of the shape

• width allows changing the width of the shape

Here’s how you can use these attributes:

var my_dataset = [       
       {
           id: "1",
           text: "Chairman & CEO",
           color: "#673AB7",
           css: "myStyle",
       },
       {
           id: "2",
           text: "Manager",
           color: "#E91E63"
       },
       {
           id: "3",
           text: "Technical Director",
           color: "#9C27B0",
           width: 200
       },
       {
           id: "1-2",
           from: "1",
           to: "2",
           css: "myConnector",
           type: "line"
       },
       {
           id: "1-3",
           from: "1",
           to: "3",
           type: "line"
       }
   ]

Here’s the result:

Using Nested Nodes

The attribute dir:»vertical» allows creating good-looking and neat nested lists. If you apply this attribute to a particular shape, all its children will be connected vertically, including the nested ones. When you create a dataset, you can use the parent attribute that defines the parent for this particular shape. For example:

var my_dataset = [
       {
          "id": 1,
          "text": "item: 1",
       },

       {
          "id": 2,
          "text": "item: 2",
          "parent": 1,
          "dir": "vertical"
       },
       {
          "id": 3,
          "text": "item: 3",
          "parent": 14
       },
       {
          "id": 7,
          "text": "item: 7",
          "parent": 14
       },
       {
          "id": 14,
          "text": "item: 14",
          "parent": 2
       },
       {
          "id": 19,
          "text": "item: 19",
          "parent": 2
       }
];

As a result, you’ll get a nested graph that is shown in the screenshot above:

Using Editor Mode for Organization Chart

Besides the described possibilities, there’s another option that allows creating a unique style for your organizational chart. The Editor Mode provides the possibility of drag-and-drop chart editing with no need to mess with any code. You can adjust all the described changes by dragging shapes, selecting required color via colorpicker, and defining the positioning and size values via the sidebar editor.

Instead of Conclusion

I hope that this small guide will be quite helpful for those developers who are looking for fast and nice-looking JavaScript org chart for their app. DHTMLX team had an aim to create easy but highly-customizable component and here it is. Note that if you’re looking for a complete open-source solution, this library won’t suit you, but you can find some worthy projects on GitHub.

Happy coding!

Introduction

Organizational charts allow representing the hierarchical structure of an organization in easy to understand way. They’re not supposed to be fancy, but it’s always important to have the possibility to change the appearance of an organizational chart the way you want. In this article, we’ll take a look at how you can create custom styles for hierarchical diagrams made with the JavaScript diagram library made by DHTMLX team. 

Initialize a Diagram on the Page

You should download dhtmlxDiagram library and add one js and one css file on the page:

<script src="codebase/diagram.js"></script>   
<link href="codebase/diagram.css" rel="stylesheet">

Now, you can create a new DIV container that will hold the org chart diagram and initialize it:

<body>
    <div id="my_diagram"></div>
    <script type="text/javascript">
        var myDiagram = new dhx.Diagram("my_diagram", {type: "org"});
    </script>
</body>

The construction takes the ID of th DIV container as a parameter. The type property is a mandatory attribute that allows choosing what type of the diagram you’re going to create. Besides that, there’s a set of optional properties that allow configuring the diagram.

Now you can initialize the diagram with data. To create a new dataset, you can use inline JSON object:

var my_dataset = [
   {
       id: "1",
       text: "Chairman & CEO",
       title: "Henry Bennett"
   },
   {
       id: "2",
       text: "Manager",
       title: "Mildred Kim"
   },
   {
       id: "3",
       text: "Technical Director",
       title: "Jerry Wagner"
   },
   { id: "1-2", from: "1", to: "2", type: "line" },
   { id: "1-3", from: "1", to: "3", type: "line" }
];

As you can see, our diagram will contain three nodes. We’ve defined IDs, the text, and title for each node. Besides that, we’ve defined the connections between the nodes.

After you create the data, you can use the parse method to load it into the diagram:

myDiagram.parse(my_dataset);

If you open the page in your browser, you’ll see the default organizational diagram:

Now, let’s take a look at how we can change the appearance of this diagram.

Changing the Appearance of Your Org Chart

Changind the Scale

If you want to create a mobile app that works with organograms, the possibility to change the scale of the diagram will be useful. For this task, you can change the value of the scale property. The default value is 1. You can set the property to value larger than 1 to zoom in. To zoom out, use value smaller than 1.

Here’s how it works:

var myDiagram = new dhx.Diagram("my_diagram", {
            type: "org",
           
           scale: 0.75
});

The result is shown below:

Changing Type of Shape

By default, the dhtmlxDiagram library uses the card shape type for its nodes. Besides that, you can use two additional types: img-card that allows adding shapes with images, and svg-card that allows rendering shapes in Internet Explorer. Let’s see how the img-card type works.

You can use the defaultShapeType attribute to set the default type for all the shapes of the diagram:

var myDiagram = new dhx.Diagram("my_diagram", {
      type: "org",
      scale: 0.75,
      defaultShapeType: "img-card"
});

Another option is to define an individual type for a particular node of the diagram using the type attribute of the data item object. Here’s an example:

var my_dataset = [
      {
               id: "1",
               text: "Chairman & CEO",
               title: "Henry Bennett",
               type: "img-card",    
               img:"./path/to/file.png"
      },
];

If you open the diagram in your browser, you’ll see that the corresponding node now contains an image:

Changing the Positioning of Nodes

It’s possible to change the position of a diagram and define margins for the nodes of the diagram. To do so, you can use the margin attribute. It contains the following properties:

• itemX defines horizontal space between two shapes

• itemY defines vertical space between two shapes

• x defines horizontal space between the diagram container and the first node

• y defines vertical space between the diagram container and the first node

Here’s how you can set the required values:

var myDiagram = new dhx.Diagram("my_diagram", {
             type: "org",
             margin:{
             x:30,
             y:30,
             itemX:80,
             itemY:80
          }
});

Using this code, you’ll get the following result:

Using CSS to Change the Style

There are two classes that allow changing the style of your diagram. .dhx_item_shape allows changing the style of the shape. Changing the .shape_content CSS class, you can modify the content of the shape.

Besides that, you can change the appearance of the connectors between the nodes. You can define a custom CSS class and use it the configuration object. Let’s consider a small example. Here’s some CSS code:

.myStyle .shape_content {
       background: #9575CB;
       color: #FFF;
   }

.myStyle:hover .shape_content {
       background: #00B7FE;
   }

.myConnector {
       stroke: red;
       stroke-dasharray: 10;
   }

Now, you can create a dataset and define a custom style for a particular shape or connector. There are four attributes that allow changing the appearance and size of an element of the diagram:

• css allows setting the name of the CSS class that will be applied to the shape

• color defines the color of the shape’s header

• height allows adjusting the height of the shape

• width allows changing the width of the shape

Here’s how you can use these attributes:

var my_dataset = [       
       {
           id: "1",
           text: "Chairman & CEO",
           color: "#673AB7",
           css: "myStyle",
       },
       {
           id: "2",
           text: "Manager",
           color: "#E91E63"
       },
       {
           id: "3",
           text: "Technical Director",
           color: "#9C27B0",
           width: 200
       },
       {
           id: "1-2",
           from: "1",
           to: "2",
           css: "myConnector",
           type: "line"
       },
       {
           id: "1-3",
           from: "1",
           to: "3",
           type: "line"
       }
   ]

Here’s the result:

Using Nested Nodes

The attribute dir:»vertical» allows creating good-looking and neat nested lists. If you apply this attribute to a particular shape, all its children will be connected vertically, including the nested ones. When you create a dataset, you can use the parent attribute that defines the parent for this particular shape. For example:

var my_dataset = [
       {
          "id": 1,
          "text": "item: 1",
       },

       {
          "id": 2,
          "text": "item: 2",
          "parent": 1,
          "dir": "vertical"
       },
       {
          "id": 3,
          "text": "item: 3",
          "parent": 14
       },
       {
          "id": 7,
          "text": "item: 7",
          "parent": 14
       },
       {
          "id": 14,
          "text": "item: 14",
          "parent": 2
       },
       {
          "id": 19,
          "text": "item: 19",
          "parent": 2
       }
];

As a result, you’ll get a nested graph that is shown in the screenshot above:

Using Editor Mode for Organization Chart

Besides the described possibilities, there’s another option that allows creating a unique style for your organizational chart. The Editor Mode provides the possibility of drag-and-drop chart editing with no need to mess with any code. You can adjust all the described changes by dragging shapes, selecting required color via colorpicker, and defining the positioning and size values via the sidebar editor.

Instead of Conclusion

I hope that this small guide will be quite helpful for those developers who are looking for fast and nice-looking JavaScript org chart for their app. DHTMLX team had an aim to create easy but highly-customizable component and here it is. Note that if you’re looking for a complete open-source solution, this library won’t suit you, but you can find some worthy projects on GitHub.

Happy coding!

Круговые диаграммы — это распространенные компоненты, позволяющие отображать части целого. Их можно использовать для самых разных целей.

О создании таких компонентов вы найдете множество статей. Но диаграммы в них обычно делаются либо на основе SVG, либо с применением большого числа HTML-элементов.

В этой статье я расскажу, как создать круговую диаграмму, используя CSS и всего один HTML-элемент.

Ниже, в CodePen, можно посмотреть, что мы будем создавать:

See the Pen
CSS only pie chart by Temani Afif (@t_afif)
on CodePen.

Как видите, у нас есть статичная и анимированная круговая диаграмма, в которых также могут быть закругленные концы. Все это сделано с помощью одного элемента <div>.

В дополнение к этому мы можем легко настроить различные значения с помощью CSS-переменных, благодаря чему нам не придется беспокоиться об изменении CSS-кода.

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

Структура HTML для круговой диаграммы

Как я упоминал выше, у нас есть один <div>, куда мы добавляем процентное значение (прогресс круговой диаграммы) в качестве основного содержимого:

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

Мы также добавляем CSS-переменные в качестве встроенных стилей.

• --p: Эта переменная должна содержать процентное значение в виде числа (без знака %). Значение должно быть таким же, как в содержимом <div>.
• --b: Эта переменная определяет толщину границы.
• --c: Эта переменная определяет основной цвет.

Для целей этой статьи, чтобы код был покороче, я использую однобуквенные переменные. В продакшен-среде, конечно, нужно использовать более осмысленные имена. Например, --percentage, --border-thickness и --main-color.

CSS для круговой диаграммы

Начнем со стилизации содержимого. Здесь все просто, код у нас будет следующий:

.pie {
  --w: 150px;
  width: var(--w);
  aspect-ratio: 1;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

(Прим. перев.: «pie» в коде — от англ. «Pie Chart» — «круговая диаграмма»).

Я определяю наш элемент как inline-grid, чтобы легко разместить содержимое в середине при помощи place-content: center. Чтобы наш элемент всегда оставался квадратным, мы используем aspect-ratio: 1. Также можно использовать height: var(--w), но всегда полезно изучать и применять новые CSS-свойства.

Возможно, вам любопытно, почему для определения ширины я использую переменную, а не просто прописываю width: 150px. В будущем мне понадобится это значение, поэтому я определяю его при помощи переменной.

Весь остальной CSS-код довольно простой и касается стилизации текста. Можете его изменить по своему вкусу.

Переходим к более интересной части — основной форме нашего компонента. Для этого мы используем псевдоэлемент со следующими стилями:

.pie:before{
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}

Псевдоэлемент, имеющий position: absolute, покрывает всю площадь благодаря inset: 0. Да, еще одно новое CSS-свойство. Это сокращенный вариант для top, right, bottom и left (почитать подробнее можно на MDN Web Docs).

Затем мы превращаем наш псевдоэлемент в круг (border-radius: 50%) и применяем conic-gradient(). Обратите внимание на использование CSS-переменных, которые мы определили в качестве встроенных стилей (--c для цвета и --p для процентного значения).

Пока что мы получаем вот такой результат:

Мы подбираемся к желаемой цели! conic-gradient() дает нам двуцветный градиент. Основной цвет — от 0% до p%, а остальная часть имеет прозрачный цвет (со значением #0000).

Чтобы оставить только границу, мы прячем середину круга при помощи mask. На этот раз мы используем radial-gradient():

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))

В качестве фона это дает нам следующий результат:

Обратите внимание на использование переменной --b, которая определяет толщину границы (на рисунке показано синим цветом).

Теперь представьте, что синяя часть остается, а красная становится невидимой. Это мы и получаем, применяя тот же градиент со свойством mask:

И вот, мы построили нашу круговую диаграмму на одном элементе и нескольких строках CSS-кода.

.pie {
  --w:150px;
  
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}
.pie:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

И HTML:

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

Как добавить скругление краев

Я добавлю дополнительный градиентный слой для первого (верхнего) конца и псевдоэлемент для второго. Вот иллюстрация этого приема:

Код для скругления верхнего конца:

.pie:before {
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
}

Помимо conic-gradient(), сверху мы добавляем radial-gradient(). Размер равен толщине границы (определяется при помощи --b).

Код для скругления второго конца:

.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translate(calc(50% - var(--w)/2));
}

Свойство inset устанавливает размер псевдоэлемента равным --b. Помните, что это сокращенный вариант записи для top, right, bottom и left.

Если у нас

left = right = 50% - b/2

это значит, что с каждой стороны мы сдвигаемся к центру, за минусом отступа в b/2. Таким образом у нас получается ширина, равная 2*b/2 = b. Та же логика применяется к высоте.

Теперь нам нужно правильно разместить наш элемент. Для этого мы используем свойство transform. Изначально элемент расположен по центру, так что нам нужно его повернуть. Имея процентное значение, мы применяем тройное правило, чтобы получить угол:

angle = percentage*360deg/100

Затем мы выполняем смещение. Здесь нам понадобится ширина, потому что смещение мы делаем на половину ширины (w/2).

Ладно, ладно, возможно, вы уже потерялись во всех этих формулах. Представленная ниже иллюстрация поможет вам понять логику, стоящую за свойством transform.

После этого мы раскрашиваем псевдоэлемент основным цветом — и все готово. Мы получили круговую диаграмму со скругленными концами.

Как анимировать круговую диаграмму

Статическая диаграмма это, конечно, хорошо, но анимированная лучше! Для этого мы будем анимировать процентное значение --p от 0 до определенного значения. По умолчанию CSS-переменные не анимируются, но благодаря новой фиче @property это стало возможным.

Регистрируем переменную:

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

Создаем keyframes:

@keyframes p {
  from {--p:0}
}

Обратите внимание: нам нужно указать только значение from. По умолчанию браузер сделает значение to равным определенному нами значению (<div class="pie" style="--p:60;">60%</div>).

И, наконец, мы вызываем анимацию. При желании можете определить продолжительность и задержку.

animation: p 1s .5s both;

К сожалению, эта техника не имеет широкой поддержки. Вы можете протестировать ее в браузерах на основе Chromium (Chrome и Edge), но в Firefox и Safari фокус не сработает. Чтобы подробнее узнать о поддержке, откройте Can I Use.

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

See the Pen
CSS only pie chart by Temani Afif (@t_afif)
on CodePen.

Перевод статьи «How to Create a Pie Chart Using Only CSS».

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

Есть более простые способы создания диаграмм, чем писать код с нуля, например, эта полная библиотека для графиков от CodeCanyon.

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

Что такое круговая диаграмма?

Диаграмма представляет собой статистический инструмент, используемый для графического представления числовых данных. Круговая диаграмма отображает эти числовые данные в виде круга, разделенного на срезы. Размер каждого среза пропорционален числовому значению, которое он обозначает.

Что такое кольцевая диаграмма?

Проще говоря, кольцевая диаграмма является вариацией круговой диаграммы. Разница в том, что срезы разрезаются по направлению к центру пирога, так что виден только обод. Таким образом, диаграмма выглядит как кольцо и, следовательно, от сюда такое имя.

Начинаем рисование с помощью Canvas

Прежде чем рисовать круговую диаграмму, мы рассмотрим ее детали. Мы увидим, как мы можем использовать компонент canvas и JavaScript чтобы нарисовать:

• Линию
• Дуга (часть круга)
• Цветную форму

Чтобы начать рисование с использованием canvas HTML5, нам нужно создать несколько вещей:

• Одна папка для хранения файлов проекта; Давайте назовем эту папку piechart-tutorial.
• Один HTML-файл index.html внутри папки piechart-tutorial. Этот файл будет содержать HTML-код.
• Один JS-файл script.js внутри папки piechart-tutorial. Этот файл будет содержать наш код JavaScript.

Мы сохраним все очень просто и добавим следующий код внутри index.html:

1

<html>

2

<body>

3

    <canvas id="myCanvas"></canvas>

4

  <script type="text/javascript" src="script.js"></script>

5

</body>

6

</html>

У нас есть элемент <canvas> с идентификатором myCanvas, чтобы мы могли ссылаться на него в нашем JS-коде. Затем мы загружаем JS-код через тег <script>.

Внутри script.js код JS сначала получает ссылку на холст, а затем устанавливает его ширину и высоту. Чтобы рисовать на холсте, нам нужна только ссылка на его 2D-контекст, который содержит все методы рисования.

1

var myCanvas = document.getElementById("myCanvas");

2

myCanvas.width = 300;

3

myCanvas.height = 300;

4

5

var ctx = myCanvas.getContext("2d");

Теперь, когда мы создали canvas, а также ссылку на холст рисунка, давайте определим несколько функций JavaScript, которые мы сможем использовать при рисовании круговой диаграммы. Мы добавим функции в наш файл script.js.

1

function drawLine(ctx, startX, startY, endX, endY){

2

    ctx.beginPath();

3

	ctx.moveTo(startX,startY);

4

	ctx.lineTo(endX,endY);

5

	ctx.stroke();

6

}

Функция drawLine принимает пять параметров:

1. ctx: ссылка на контекст рисунка
2. startX: координата X начальной точки линии
3. startY: координата Y начальной точки линии
4. endX: координата X конечной точки линии
5. endY: координата Y конечной точки линии

Мы начинаем рисовать линию, вызывая beginPath(). Это сообщает контексту рисования, что мы начинаем рисовать что-то новое на холсте. Мы используем moveTo(), чтобы установить начальную точку, callTo(), чтобы указать конечную точку, а затем выполнить фактический чертеж, вызвав stroke().

Давайте посмотрим, как мы можем нарисовать часть круга, также называемую дугой.

1

function drawArc(ctx, centerX, centerY, radius, startAngle, endAngle){

2

    ctx.beginPath();

3

	ctx.arc(centerX, centerY, radius, startAngle, endAngle);

4

	ctx.stroke();

5

}

Функция drawArc принимает шесть параметров:

1. ctx: ссылка на контекст чертежа
2. centerX: координата X центра окружности
3. centerY: координата Y центра окружности
4. radius: координата X конечной точки линии
5. startAngle: угол начала в радианах, где начинается часть круга
6. endAngle: конечный угол в радианах, где заканчивается часть круга

Мы видели, как рисовать линию и как рисовать дугу, поэтому теперь давайте посмотрим, как нарисовать цветную фигуру. Поскольку наша цель состоит в том, чтобы нарисовать круговую диаграмму, состоящую из срезов, давайте создадим функцию, которая рисует кусочек пирога.

1

function drawPieSlice(ctx,centerX, centerY, radius, startAngle, endAngle, color ){

2

    ctx.fillStyle = color;

3

	ctx.beginPath();

4

	ctx.moveTo(centerX,centerY);

5

	ctx.arc(centerX, centerY, radius, startAngle, endAngle);

6

	ctx.closePath();

7

	ctx.fill();

8

}

Функция drawPieSlice имеет семь параметров:

1. ctx: ссылка на контекст рисунка
2. centerX: координата X центра окружности
3. centerY: координата Y центра окружности
4. radius: координата X конечной точки линии
5. startAngle: угол начала в радианах, где начинается часть круга
6. EndAngle: конечный угол в радианах, где заканчивается часть круга
7. color: цвет, используемый для заполнения среза

Ниже приведен пример вызова трех функций:

1

drawLine(_ctx,100,100,200,200);

2

drawArc(_ctx, 150,150,150, 0, Math.PI/3);

3

drawPieSlice(_ctx, 150,150,150, Math.PI/2, Math.PI/2 + Math.PI/4, '#ff0000');

Это даст результат:

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

Рисование круговой диаграммы

Концептуально любая диаграмма имеет две основные части:

• Модель данных содержит численные данные, которые должны быть представлены. Это структурировано в формате, специфичном для типа диаграммы.
• Графическое представление состоит в том, как числовые данные в модели данных представлены визуальными элементами в соответствии с некоторыми правилами в форме математических формул.

Модель данных круговой диаграммы

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

Например, модель данных круговой диаграммы, отображающей количество винилов, сгруппированных по жанрам, будет выглядеть примерно так:

• Классическая музыка: 10
• Альтернативный рок: 14
• Поп: 2
• Джаз: 12

Мы можем добавить объект JS к файлу script.js для хранения модели данных следующим образом:

1

var myVinyls = {

2

    "Classical music": 10,

3

	"Alternative rock": 14,

4

	"Pop": 2,

5

	"Jazz": 12

6

};

Графическое представление круговой диаграммы

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

Моя небольшая коллекция из 38 винилов имеет четыре категории. Каждая категория получит кусочек круговой диаграммы, пропорциональный числу винилов в этой категории.

Но как мы измеряем размер среза? Это легко — мы делаем это под углом на кончике среза. Все, что мы должны знать, это то, что полный круг соответствует углу 360 градусов или 2 * PI. Таким образом, половина круга будет составлять 180 градусов или PI, четверть 90 градусов или PI / 2 и т.д.

Для определения угла для каждого сегмента категории мы используем формулу:

Угол среза = 2 * PI * значение категории / общее значение

Согласно этой формуле, десять виниловых пластинок классической музыки получат угол среза примерно. 0,526 * PI или 94 град.

Давайте перейдем к рисованию. Для этого мы будем использовать класс JavaScript, который мы назовем Piechart. Конструктор получит один аргумент options, объект, содержащий следующее:

• canvas: ссылка на холст, где мы хотим нарисовать круговую диаграмму
• data: ссылка на объект, содержащий модель данных
• colors: массив, содержащий цвета, которые мы хотим использовать для каждого фрагмента

Класс Piechart также содержит один метод draw(), который делает фактический чертеж диаграммы.

1

var Piechart = function(options){

2

    this.options = options;

3

	this.canvas = options.canvas;

4

	this.ctx = this.canvas.getContext("2d");

5

	this.colors = options.colors;

6

7

	this.draw = function(){

8

		var total_value = 0;

9

		var color_index = 0;

10

		for (var categ in this.options.data){

11

			var val = this.options.data[categ];

12

			total_value += val;

13

		}

14

15

		var start_angle = 0;

16

		for (categ in this.options.data){

17

			val = this.options.data[categ];

18

			var slice_angle = 2 * Math.PI * val / total_value;

19

20

			drawPieSlice(

21

				this.ctx,

22

				this.canvas.width/2,

23

				this.canvas.height/2,

24

				Math.min(this.canvas.width/2,this.canvas.height/2),

25

				start_angle,

26

				start_angle+slice_angle,

27

				this.colors[color_index%this.colors.length]

28

			);

29

30

			start_angle += slice_angle;

31

			color_index++;

32

		}

33

34

	}

35

}

Класс начинается с сохранения options , переданных в качестве параметров. Он сохраняет ссылку на canvas и создает контекст рисования, также сохраняемый как член класса. Затем он сохраняет массив colors, переданный как параметры.

Следующая часть — сама функция draw(). Она отобразит данные из модели данных. Сначала она вычисляет сумму всех значений в модели данных. Затем для каждой категории в модели данных применяем приведенную выше формулу для вычисления угла среза пирога. Наконец, мы используем функцию drawPieSlice(), используя центр холста в качестве центра среза. В качестве радиуса мы используем минимальное значение между половиной ширины холста и половиной высоты холста, так как мы не хотим, чтобы наш пирог выходил из холста.

Мы также компенсируем угол начала и конца срезов каждый раз, когда рисуем категорию, иначе срезы будут перекрываться.

Чтобы использовать класс, мы должны создать экземпляр, а затем вызвать метод draw() у созданного объекта.

1

var myPiechart = new Piechart(

2

    {

3

		canvas:myCanvas,

4

		data:myVinyls,

5

		colors:["#fde23e","#f16e23", "#57d9ff","#937e88"]

6

	}

7

);

8

myPiechart.draw();

И результат выглядит так

Рисование кольцевой диаграммы

Мы видели, как рисовать круговую диаграмму. Мы также знаем, что кольцевая диаграмма отличается только наличием отверстия в середине диаграммы. Как нам нарисовать дыру? Мы можем нарисовать белый кружок над круговой диаграммой.

Давайте изменим код класса Piechart, чтобы сделать это.

1

var Piechart = function(options){

2

    this.options = options;

3

	this.canvas = options.canvas;

4

	this.ctx = this.canvas.getContext("2d");

5

	this.colors = options.colors;

6

7

	this.draw = function(){

8

		var total_value = 0;

9

		var color_index = 0;

10

		for (var categ in this.options.data){

11

			var val = this.options.data[categ];

12

			total_value += val;

13

		}

14

15

		var start_angle = 0;

16

		for (categ in this.options.data){

17

			val = this.options.data[categ];

18

			var slice_angle = 2 * Math.PI * val / total_value;

19

20

			drawPieSlice(

21

				this.ctx,

22

				this.canvas.width/2,

23

				this.canvas.height/2,

24

				Math.min(this.canvas.width/2,this.canvas.height/2),

25

				start_angle,

26

				start_angle+slice_angle,

27

				this.colors[color_index%this.colors.length]

28

			);

29

30

			start_angle += slice_angle;

31

			color_index++;

32

		}

33

34

        //drawing a white circle over the chart

35

        //to create the doughnut chart

36

		if (this.options.doughnutHoleSize){

37

			drawPieSlice(

38

				this.ctx,

39

				this.canvas.width/2,

40

				this.canvas.height/2,

41

				this.options.doughnutHoleSize * Math.min(this.canvas.width/2,this.canvas.height/2),

42

				0,

43

				2 * Math.PI,

44

				"#ff0000"

45

			);

46

		}

47

48

	}

49

}

Добавленный код просматривает параметр options для переменной-члена doughnutHoleSize. Если его не существует в options, тогда код будет рисовать круговую диаграмму, как и раньше, но если существует, тогда белый круг рисуется с тем же центром, что и круговая диаграмма.

Радиус круга определяется путем умножения радиуса круговой диаграммы и значения параметра doughnutHoleSize. Это должно быть число от 0 до 1, где 0 приведет к круговой диаграмме, и любые значения, превышающие 0, приведут к тому, что кольцо с отверстием будет больше и больше, 1 сделает диаграмму невидимой.

Чтобы нарисовать кольцевую диаграмму с отверстием на половину размера диаграммы, нам нужно будет использовать значение doughnutHoleSize 0.5 и сделать следующие вызовы:

1

var myDougnutChart = new Piechart(

2

    {

3

		canvas:myCanvas,

4

		data:myVinyls,

5

		colors:["#fde23e","#f16e23", "#57d9ff","#937e88"],

6

		doughnutHoleSize:0.5

7

	}

8

);

9

myDougnutChart.draw();

И вот результат:

Добавление меток и легенды диаграммы

Наша круговая и кольцевая диаграммы выглядят довольно хорошо, но мы можем сделать их еще лучше, добавив две вещи:

• Метки значений: отображение процента, соответствующего каждому фрагменту
• Легенда диаграммы: отображение категорий и соответствующих цветов на диаграмме

Обычно значения, связанные со срезами, представляются в виде процентных значений, рассчитанных как 100 * значение, связанное со значением среза / общего значения, при этом весь круг составляет 100%.

Например, в случае наших выборочных данных винилы с классической музыкой будут составлять примерно 26%. Было бы неплохо написать это значение прямо на соответствующем фрагменте. Для этого мы будем использовать функцию fillText(text, x, y) контекста рисования. Эта функция принимает три параметра: текст и координаты x и y.

Как мы вычисляем координаты x и y для размещения текста? Мы должны использовать некоторые знания геометрии и что-то, что называется полярными координатами. В основном полярные координаты используют радиус и угол для определения положения точки. Мы будем использовать две формулы:

x = R * cos(angle)

y = R * sin(angle)

Мы применим эти две формулы, чтобы поместить текст наполовину вдоль радиуса круговой диаграммы и на полпути вокруг угла для каждого кусочка пирога. Для этого нам нужно изменить наш класс Piechart и добавить следующий код сразу после блока if (this.options.doughnutHoleSize) {...}:

1

        ...

2

        start_angle = 0;

3

		for (categ in this.options.data){

4

			val = this.options.data[categ];

5

			slice_angle = 2 * Math.PI * val / total_value;

6

			var pieRadius = Math.min(this.canvas.width/2,this.canvas.height/2);

7

			var labelX = this.canvas.width/2 + (pieRadius / 2) * Math.cos(start_angle + slice_angle/2);

8

			var labelY = this.canvas.height/2 + (pieRadius / 2) * Math.sin(start_angle + slice_angle/2);

9

10

			if (this.options.doughnutHoleSize){

11

				var offset = (pieRadius * this.options.doughnutHoleSize ) / 2;

12

				labelX = this.canvas.width/2 + (offset + pieRadius / 2) * Math.cos(start_angle + slice_angle/2);

13

				labelY = this.canvas.height/2 + (offset + pieRadius / 2) * Math.sin(start_angle + slice_angle/2);				

14

			}

15

16

			var labelText = Math.round(100 * val / total_value);

17

			this.ctx.fillStyle = "white";

18

			this.ctx.font = "bold 20px Arial";

19

			this.ctx.fillText(labelText+"%", labelX,labelY);

20

			start_angle += slice_angle;

21

		}

22

        ...

Код перебирает каждый фрагмент, вычисляет процент, вычисляет позицию и использует метод fillText(), чтобы нарисовать его на диаграмме. Мы использовали свойство fillStyle, чтобы установить цвет текста в белый цвет и свойство font, чтобы установить размер, стиль и семейство шрифтов метки. Также важно отметить, что если диаграмма представляет собой кольцевую диаграмму, а значение параметра doughnutHoleSize установлено, тогда метка будет сдвигаться к краю диаграммы, чтобы сделать ее центрированной на куске пончика.

И вот как выглядят полученные диаграммы с помощью меток значений:

Чтобы завершить наш график, последнее, что мы добавим, это легенда диаграммы. В нашей легенде диаграммы будут отображаться категории нашей модели данных и цвет, используемый для соответствующего фрагмента. Сначала мы должны внести некоторые изменения в наш файл index.html, добавив тег <div>, который сохранит наш элемент легенды.

1

<html>

2

<body>

3

    <canvas id="myCanvas"></canvas>

4

	<div id="myLegend"></div>

5

	<script type="text/javascript" src="script.js"></script>

6

</body>

7

</html>

Затем в script.js мы добавляем код, который создает содержимое элемента легенды. Мы добавляем этот код в конце функции draw() класса Piechart:

1

...

2

        if (this.options.legend){

3

			color_index = 0;

4

			var legendHTML = "";

5

			for (categ in this.options.data){

6

				legendHTML += "<div><span style='display:inline-block;width:20px;background-color:"+this.colors[color_index++]+";'>&nbsp;</span> "+categ+"</div>";

7

			}

8

			this.options.legend.innerHTML = legendHTML;

9

		}

10

...

Код ищет элемент legend, переданный через параметр options. Если один из них указан, этот элемент заполняется кодом HTML, содержащим цветное поле и название категории модели данных.

Нам также необходимо внести изменения в то, как мы называем рисунок нашей круговой диаграммы следующим образом:

1

var myLegend = document.getElementById("myLegend");

2

3

var myDougnutChart = new Piechart(

4

    {

5

		canvas:myCanvas,

6

		data:myVinyls,

7

		colors:["#fde23e","#f16e23", "#57d9ff","#937e88"],

8

		legend:myLegend

9

	}

10

);

11

myDougnutChart.draw();

И вот результирующая диаграмма и легенда диаграммы:

Поздравления

Мы увидели, что рисование диаграмм с использованием холста HTML5 на самом деле не так сложно. Для этого требуется только немного математики и немного знаний JavaScript. У вас теперь есть все, что вам нужно для рисования собственных круговых и кольцевых диаграмм и диаграмм.

Если вам нужно быстрое и простое решение для создания не только круговых и кольцевых диаграмм, но и других типов диаграмм, вы можете загрузить Infographic Charts and Graphics HTML Tags Library или их плагинWordPress Charts and Graphs WordPress Visual Designer.

От автора: люди, по всему миру заседающие в советах директоров, любят хорошие диаграммы. Они сходят с ума по PowerPoint’у, маркированным спискам и фразам типа «запустить идею и посмотреть, что выйдет», «незамутненное мышление» и «легкая добыча», и чтобы все всегда «двигалось вперед». Обратно – не альтернатива для тех, кто способствует сдвигу парадигм в духе времени. Графики финансовых прогнозов, цифры квартальных продаж и насыщения рынка – мечты управляющего среднего звена.

Как мы, будучи веб-дизайнерами, можем справиться с насущной диаграммой? В действительности отобразить их в Сети можно нескольким способами. Можно просто создать изображение и прикрепить его к веб-странице. Но это не очень общедоступно или интересно. Можно использовать Flash, который весьма хорош для показа диаграмм  —  но опять же, не очень общедоступен. Кроме того, дизайнеры, разработчики и божества разлюбили Flash. Такие технологии, как HTML5, могут делать многое из того же, не нуждаясь в плагине. Адаптировать к этой задаче можно даже новый элемент HTML5 canvas. Онлайн предлагается множество инструментов составления диаграмм и графиков, которые тоже применимы. Но что, если нам нужно что-то более близкое к потребностям?

Существуют «за» и «против» широкого ряда доступных нам ресурсов, но этот учебник не будет их исследовать. Вместо того мы создадим собственную диаграмму с применением прогрессивно улучшенных крох CSS3 и jQuery. Потому что можем это.

Что мы делаем?

Мы делаем это. И более того! Вот несколько возможностей расширения объясняемых в учебнике техник:

— Индикатор выполнения, показывающий, сколько времени осталось человечеству в случае эпидемии зомби;

— Диаграмма, показывающая уровень снижения безопасности занятий на свежем воздухе во время эпидемии;

— Ужасающе похожая диаграмма, показывающая уровень снижения воспитанности во время эпидемии зомби;

— Увеличение уровня людей, не знающих об эпидемии, потому что они делились со своими зараженными друзьями на Facebook’е* тем, что делали на FarmVille.

Или можно было бы создать график или круговую диаграмму, которые просто иллюстрируют что-то полезное и не переполненное ужасами и зомби. Так что давайте начнем.

Что вам понадобится

— Текстовый редактор или редактор HTML. Выберите свой — здесь их много.

— jQuery. Займитесь безопасным кодированием и возьмите самый последний. Держите вебсайт jQuery открытым, чтобы можно было во время процесса читать документацию.

— Возможно, редактор изображений, такой как Paint, чтобы имитировать то, как могла бы смотреться ваша диаграмма.

— Современный и достойный веб-браузер для предварительного просмотра изменений.

Этого должно хватить. Пожалуйста, обратите внимание, что этот учебник – не введение ни в HTML, ни в CSS, ни в jQuery, ни в зомбиведение. Предполагается некоторый средний уровень знания этих трех технологий и живых мертвецов.

Разметка

HTML-основу диаграммы можно создать множеством способов. В этом учебнике мы начнем с table, потому что это самое здравое визуальное решение в случае, если не применяется JavaScript или CSS. Для доступности в колонке имеется большая галочка.

Скорее! Вам только что предоставили тревожные цифры. Прогнозируется, что количество загорелых зомби в несколько ближайших лет выйдет из-под контроля. Под непосредственной угрозой находятся углеродные тигры и голубые обезьяны. Затем загорелые зомби, скорее всего, возьмутся за нас. Но вы – просто дизайнер. Чем вы могли бы помочь?

Я знаю! Вы могли бы сделать веб-страницу, иллюстрирующую нашу неотвратимую кончину, с красивой, успокаивающей, отлично анимированной графикой!

Для начала давайте вставим эти данные в таблицу, где колонки отражают годы, а строки – различные виды.

Смотрите пример ниже, чтобы понять, как это выглядит неприкрыто, без применения CSS или JavaScript. Доступность этой таблицы даст возможность людям, использующим скринридеры, понять данные и прочесть послание между строк – «Спасайтесь! Зомби идут!»

Самая легкая часть окончена. Теперь давайте положимся на возможности CSS и JavasScript’а (посредством jQuery), чтобы иллюстрировать то, о чем нам говорят цифры. Технически наша задача – создать диаграмму, работающую во всех современных браузерах от IE 8 и далее.

Я сказал, во всех современных браузерах? IE 8 — счастливчик: ему повезло отвисать в компании классных ребят. Браузеры, поддерживающие CSS3, получат несколько дополнительных вливаний.

«Объединенными усилиями…»

Если хотите вызвать на помощь Капитана Планету, вам, возможно, придется поискать еще где-нибудь. Если хотите знать, как скомбинировать CSS и jQuery для создания диаграммы, иллюстрирующей нашу грядущую судьбу в руках растущей армии зомби, предпочитающих мозгам автозагар, то читайте больше.

Первое, что нужно сделать – это определить стили таблице с помощью некоторого количества основного CSS. Это – красивая безопасная сетка для тех, кто не включил в своем браузере JavaScript.

Начинаем работать с jQuery

Мы применим jQuery для создания своей диаграммы «на ходу», отдельно от исходной таблицы данных. Чтобы это сделать, нужно получить данные из таблицы и сохранить их в более применимом формате. Затем можно добавить в свой документ новые элементы, применяющие эти данные для конструирования диаграммы.

Давайте начнем с создания основной функции createGraph(). Я сократил некоторые из внутренних процессов этой функции, чтобы вы могли получить более ясную картину структуры. Не забывайте: вы всегда можете обратиться к исходному коду, имеющемуся в этом учебнике.

Вот наша основная структура:

Этой функции передаются два параметра:

1. Данные data в форме табличного элемента table;

2. Элемент container, где мы хотели бы в документе разместить свою диаграмму.

Далее мы объявим несколько переменных для управления своими данными и элементами контейнера плюс несколько переменных-датчиков времени для анимации. Вот код:

Здесь ничего особенно волнующего нет, но позже все это пригодится.

Получение данных

Помимо простого отображения данных хорошая гистограмма должен иметь красивый большой заголовок, четко маркированные оси и легенду с цветной маркировкой. Нам придется извлекать данные из таблицы и форматировать ее более выразительным образом в диаграмму. Чтобы сделать это, мы создадим объект JavaScript, хранящий наши данные в удобных маленьких функциях. Давайте родим свой объект tableData{}:

Тут у нас есть несколько функций, и они объясняются в комментариях к коду. Большая часть их весьма похожа, так что нам не нужно объяснять каждую. Вместо этого давайте выделим одну из них, columnGroups:

Вот как она делится:

— Создайте массив columnGroups[] для хранения данных;

— Получите количество колонок, посчитав ячейки таблицы (td) в первой строке;

— Для каждой колонки найдите количество строк в теле таблицы (tbody) и создайте другой массив для хранения данных табличной ячейки;

— Затем пройдитесь по каждой строке и выберите данные из каждой ячейки таблицы (посредством функции jQuery text()function), а затем добавьте их в массив данных табличной ячейки.

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

Применение данных

Используя функцию jQuery $.each, уже можно в любой точке циклически просматривать данные и создавать элементы, составляющие диаграмму. Один из самых ловких приемов касается вставки столбцов, представляющих каждый вид внутри годовых колонок.

Вот код:

За исключением заголовков, у нашей таблицы есть пять колонок с тремя строками. В нашей диаграмме это означает, что в каждой создаваемой нами колонке появятся по три столбца. Следующее изображение показывает, как будет сконструирована наша гистограмма:

Разбиваем ее:

— Создайте для каждой колонки div контейнера;

— Пройдитесь внутри каждой колонки для получения данных строки и ячейки;

— Создайте объект столбцов (barObj{}) для хранения свойств каждого столбца, таких как его метка, высота и разметка;

— Добавьте в колонку свойство разметки, применяя класс CSS ‘.fig’ + j для кодирования цвета каждого столбца в колонке и обернув метку в span;

— Добавьте объект в свой массив bars[], чтобы позже можно было иметь доступ к данным;

— Соедините все это вместе, добавив колонки в элемент контейнера колонки.

Приз тому, кто заметил, что мы не установили высоту столбцов. Это для того, чтобы позже лучше контролировать то, как они отображаются.

Теперь, когда у нас уже есть столбцы, давайте поработаем над метками своей гистограммы. Так как код для отображения меток весьма похож, объяснять вам его нет необходимости. Вот как мы отображаем ось y:

Более подробно здесь:

— Получите релевантные табличные данные для своих меток;

— Создайте для элементов неупорядоченный список (ul);

— Пройдитесь по данным меток и создайте для каждой метки пункт списка (li), обернув каждую метку в span;

— Прикрепите пункт к своему списку;

— Наконец, прикрепите список к элементу контейнера.

Повтором этого приема можно добавить легенду, метки оси x и заголовки своей диаграммы.

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

Отображение данных

Все, что осталось сделать в jQuery – это установить высоту каждого столбца. Вот где пригодится то, что ранее мы сохранили свойство высоты в объекте столбцов (bar).

Мы собираемся последовательно анимировать свою диаграмму, один столбец за другим.

Одно из возможных решений – применить функцию повторного вызова для оживления следующего столбца после окончания последней анимации. Однако анимация диаграммы будет слишком долгой. Вместо этого в нашей гистограмме будет применяться функция таймера для отображения каждого столбца через определенный промежуток времени независимо от того, сколько времени требуется каждому столбцу для набора своей высоты. Круто!

Вот функция displayGraph():

Что вы сказали? «Почему ты не используешь функцию $.each, как везде?» Отличный вопрос. Во-первых, давайте обсудим, что делает функция displayGraph(), а затем почему это так, как есть.

Функция displayGraph() принимает два параметра:

1. Столбцы для циклического просмотра.

2. Указатель (i), от которого нужно начинать повторение (начинающийся с 0).

Давайте разобьем на части остальное:

— Если значение i меньше количества столбцов, то продолжайте;

— Получите текущий столбец из массива, применив значение i;

— Анимируйте свойство высоты (высчитанное как процент и хранимое в bars.height);

— Подождите 100 миллисекунд;

— Увеличьте i на 1 и повторите процесс для следующего столбца.

«Так почему же вам просто не применить перед анимацией функцию $.each с delay()?»

Можно было бы, и это отлично сработало бы… один раз. Но если вы попробовали бы перезагрузить анимацию через кнопку «Перезагрузить гистограмму» («Reset graph»), то события таймера четко не сработали бы и столбцы анимировались бы не поочередно.

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

В продолжение вот вам resetGraph():

Давайте разберем resetGraph():

— Остановите всю анимацию и установите высоту каждого столбца обратно на 0;

— Освободите таймеры, чтобы не было запоздалой анимации;

— Подождите 200 миллисекунд;

— Вызовите displayGraph() для анимации первого столбца (при индексе 0).

Наконец, вызовите resetGraph() внизу createGraph() и наблюдайте за происходящим волшебством, греясь в лучах славы результата своего тяжкого труда.

Не так скоро, радость моя! Перед тем, как продолжить, нужно немного «приодеться».

CSS

Первое, что нам нужно сделать – это скрыть исходную таблицу данных. Это можно совершить множеством способов, но так как наш CSS будет загружаться задолго до JavaScript’а, давайте сделаем это наиболее простейшим способом:

Готово. Давайте создадим красивую область контейнера, в который поместим свою диаграмму. Так как при ее создании применялись несколько неупорядоченных списков, мы также перезагрузим стили для них. Важно передать элементам #figure и .graph position: relative, так как это закрепит элементы места в контейнерах в точности там, где нам нужно.

А теперь перейдем к легенде. Мы размещаем легенду прямо внизу контейнера (#figure) и выстраиваем пункты по горизонтали:

Ось x очень похожа на легенду. Мы выстраиваем элементы по горизонтали и закрепляем их ко дну контейнера (.graph):