Използвайте Chart.js, за да превърнете данните в интерактивни диаграми

Страница 2 от 2: Използване на Chart.js: Стъпки 11-20

11. Подобрете оцветяването на пай

Добавянето на шарки прави вашите диаграми достъпни за цветно незрящи потребители

Добавянето на шарки прави вашите диаграми достъпни за цветно незрящи потребители

Chart.js не съдържа генератор на произволни цветове - ако не предоставите цветен масив, цветовете няма да се променят. Тъй като проектирането на системи, базирани само на цветове, е неефективно - много хора страдат от цветна слепота. Хубав начин за заобикаляне на проблема е патерномалия библиотека.



var mypie = { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ backgroundColor: [ pattern. draw('square', '#ff6384'), pattern. draw('circle', '#36a2eb'), pattern. draw('diamond', '#cc65fe'), pattern. draw('triangle', '#ffce56'), pattern. draw('square', '#1f77b4'), pattern. draw('circle', '#ff7f0e'), pattern. draw('diamond', '#2ca02c'), pattern. draw('zigzag-horizontal', '#17becf'), pattern. draw('triangle', '#7f7f7f') . . .

12. Използвайте модели

Всъщност прилагането на шаблон не е трудно. Както е показано по-горе, просто ги инстанцирайте, като използвате името от фигурата и цветен екран, който да се използва като фон. Уверете се, че масивът съдържа достатъчно елементи, за да покрие всеки член на полето с данни.



13. Разгледайте проблемите с подсказка

Към момента прозорецът с подсказка не може да разпознае информация за цвета

macbook pro 13 инчов калъф за пътуване
Към момента прозорецът с подсказка не може да разпознае информация за цвета

Стартирането на програмата с активирани инструменти за разработчици намира интересен проблем. При преминаване на курсора на мишката върху елементите на диаграмата се появяват грешки. Това се дължи на прозореца с подсказка, който не може да разпознае цветната информация от елементите на пай, заредени с шаблон.



14. Презаписване на информация

Разглежданият проблем може да бъде отстранен чрез заместване на части от елемента на подсказката. Chart.js ви позволява да изпращате манипулатори на събития, които се извикват като изскачащ прозорец с подсказка - презаписване етикетЦвят деактивира алгоритъма за проследяване, отговорен за излъчването на предупреждението, видяно преди.

wacom cintiq 27 qhd touch преглед
chart = new Chart(ctx, { type: 'pie', options: { maintainAspectRatio:false, tooltips: { callbacks: { labelColor: function(tooltipItem, chart) { return { borderColor: 'rgb(255, 0, 0)', backgroundColor: 'rgb(255, 0, 0)' } }, labelText Color:function(tooltipItem, chart){ return '#543453'; } } } }, data: mypie });

15. Добавете заглавие

Особено когато диаграмите са предназначени за експортиране или запазване, добавянето на заглавие подобрява смисъла на показваната информация. Кодът, показан до тази стъпка, се грижи ефективно за проблема - допълнително персонализиране, като избора на шрифтове, може да се извърши с допълнителни параметри.

var chart = new Chart(ctx, { type: 'line', options: { title: { display: true, text: 'Line Chart' } }, data: myfield

16. Добавете още една диаграма

Уверете се, че сте включили масива Labels в този момент



Уверете се, че сте включили масива Labels в този момент

Досега нашите диаграми бяха ограничени до един бит информация наведнъж. Добавянето на второ „ниво“ към поле за данни мотивира Chart.js да създаде диаграма, съставена от повече от един набор от данни. The Етикети array е важен, тъй като неговият пропуск кара програмата да пропуска части от данните.

поза 11 срещу поза про 11
var myfield2 = { labels: ['1', '2', '3', '4', '5', '6', '7'], datasets: [{ label: 'My First dataset', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [0, 10, 5, 2, 20, 30, 45], }, { label: 'My second dataset', fillColor: 'rgba(151,187,205,0.2)', strokeColor: 'rgba(151,187,205,1)', data: [28, 33, 40, 19, 12, 27, 9] }] };

17. Попълнете масива от данни

Генерирането на масива на етикета може да стане досадно. Ако информацията ви се доставя от някъде, където е лесно достъпна обикновената информация, масивът от данни може също да бъде попълнен с масив от Точка[] полета. В този случай използвайте синтаксиса, показан по-долу.

data: [{ x: 10, y: 20 }, { x: 15, y: 10 }]

18. Коригирайте разположението на диаграмите

Гореспоменатият проблем с разстоянието затруднява схемите за позициониране. Chart.js се справя с този проблем чрез атрибута за подложка, намерен в полето с опции - той ви позволява да декларирате зона за отказ на всеки от четирите полета на контейнера, като по този начин ограничавате изобразяването.

var chart = new Chart(ctx, { type: 'line', options: { layout: { padding: { left: 30, right: 30, top: 30, bottom:30 } },

19. Задайте оформлението глобално

Присвояването на настройки за оформление на всяка диаграма е досадно. По-интелигентен подход включва Chart.defaults.global елемент. Той излага настройките по подразбиране, които Chart.js ще използва за нови диаграми и може да спести много код, ако няколко диаграми трябва да бъдат хоствани една до друга.

document.addEventListener('DOMContentL oaded', function(){ Chart.defaults.global.layout = { padding: { left: 30, right: 30, top: 30, bottom: 30 } };

20. Погледнете примери

Разработчиците на Chart.js предоставят a набор от примери s, за да покаже рамката в действие. Разгледайте различните опции - обикновено изходният код се коментира добре. Библиотеката също идва с изключително подробна документация . Просто го отворете в избран браузър и отидете до сектора, който ви интересува най-много.

как да създадете оформление на списание в

Тази статия първоначално е публикувана в списание за уеб дизайн за уеб дизайн. Купете брой 281 или абонирайте се тук .

Прочетете още:

  • 1
  • две

Текуща страница: Използване на Chart.js: Стъпки 11-20

Предишна страница Използване на Chart.js: Стъпки 01-10