Библиотека диаграмм JS в рисованном стиле: Chart.xkcd

JavaScript визуализация данных
Библиотека диаграмм JS в рисованном стиле: Chart.xkcd

Автор этой статьи: HelloGitHub-kalifun

Десятки тысяч библиотек диаграмм Сегодня HelloGitHub рекомендует очень «характерную» библиотеку диаграмм: JS-библиотеку диаграмм в рисованном стиле — Chart.xkcd, убери свое напряженное и серьезное лицо, давайте взглянем на нарисованную от руки Стиль показывает эффект данных.

1. Введение

адрес проекта:GitHub.com/issues/check…

Chart.xkcd — это библиотека диаграмм, которая рисует «недетализированные», «мультяшные» или «нарисованные от руки» диаграммы.

Разве эффект не милый? Затем следуйте HelloGitHub, чтобы инициировать«Объяснение проектов с открытым исходным кодом»Давайте учиться и использовать учебник вместе!

2. Быстрый старт

Chart.xkcd легко использовать, просто нужно включить ссылку на библиотеку и одну для отображения диаграмм.<svg>узел.

2.1 Пример кода

Во-первых, используйте короткий код, чтобы все могли понять основные параметры и то, как выглядит код.Будут фрагменты исполняемого кода для всех, чтобы изучить и использовать 😁.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--将 SVG 元素直接嵌入 HTML 页面中-->
<svg class="line-chart"></svg>
<!--引入 JS 库-->
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
	//关键代码块
  const svg = document.querySelector('.line-chart')
  new chartXkcd.Line(svg, {
    title: '',
    xLabel: '',
    yLabel: '',
    data: {...},
    options: {},
  });
</script>
</body>
</html>

2.2 Описание параметров

  • title: название диаграммы
  • xLabel: метка x диаграммы
  • yLabel: y метка графика
  • data: Визуальные данные требуются
  • options: Пользовательские настройки

3. Типы диаграмм

Chart.xkcd поддерживает различные типы диаграмм. Ниже будут объяснены и реализованы их один за другим: линейная диаграмма, диаграмма XY, гистограмма, круговая / кольцевая диаграмма, радарная диаграмма. Реализованный пример кода является полным и работоспособным, с полными комментариями. и параметры.

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

3.1 Линейный график

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

образец кода

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--将 SVG 元素直接嵌入 HTML 页面中-->
<svg class="line-chart"></svg>
<!--引入 JS 库-->
<script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1.1/dist/chart.xkcd.min.js"></script>
<script>
    // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".line-chart" 的元素。
    const svg = document.querySelector('.line-chart');

    // chartXkcd.Line 创建一个折线图
    const lineChart = new chartXkcd.Line(svg, {
        //图表的标题
        title: 'Monthly income of an indie developer',
        // 图表的 x 标签
        xLabel: 'Month',
        // 图表的 y 标签
        yLabel: '$ Dollors',
        // 需要可视化的数据
        data: {
            // x 轴数据
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
            // y 轴数据
            datasets: [{
                // 第一组数据
                label: 'Plan',
                data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
            }, {
                // 第二组数据
                label: 'Reality',
                data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
            }],
        },
        // 可选配置以自定义图表的外观
        options: {
            // 自定义要在 y 轴上看到的刻度号（默认为 3）
            yTickCount: 3,
            // 指定要放置图例的位置
            legendPosition: chartXkcd.config.positionType.upLeft
        }
    });
</script>
</body>
</html>

Параметр Описание

  • yTickCount: Настройте числа тактов, чтобы они отображались на оси Y (по умолчанию 3).
  • legendPosition: указывает, где разместить легенду (по умолчаниюchartXkcd.config.positionType.upLeft).
    • Верхнее левое положение:chartXkcd.config.positionType.upLeft
    • Верхнее правое положение:chartXkcd.config.positionType.upRight
    • Нижнее левое положение:chartXkcd.config.positionType.downLeft
    • Нижнее правое положение:chartXkcd.config.positionType.downRight
  • dataColors: Массив наборов данных с разными цветами
  • fontFamily: настроить семейство шрифтов, используемых в диаграмме.
  • unxkcdify: отключить эффект xkcd (по умолчанию false)

Показать результаты

3.2 График XY

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

образец кода

<script>
    // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".xy-chart" 的元素。
    const svg = document.querySelector('.xy-chart');
    //chartXkcd.XY 创建一个XY图
    new chartXkcd.XY(svg, {
        //图表的标题
        title: 'Pokemon farms',
        // 图表的 x 标签
        xLabel: 'Coodinate',
        // 图表的 y 标签
        yLabel: 'Count',
        // 需要可视化的数据
        data: {
            datasets: [{
                // 第一组数据
                label: 'Pikachu',
                data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
            }, {
                // 第二组数据
                label: 'Squirtle',
                data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }],
            }],
        },
        options: {
            // 自定义要在 x 轴上看到的刻度号（默认为 3）
            xTickCount: 5,
            // 自定义要在 y 轴上看到的刻度号（默认为 3）
            yTickCount: 5,
            // 指定要放置图例的位置
            legendPosition: chartXkcd.config.positionType.upRight,
            // 用线连接点（默认 false）
            showLine: false,
            // 指定时间格式
            timeFormat: undefined,
            // 更改点的大小（默认为 1）
            dotSize: 1,
        },
    });
</script>

Параметр Описание

  • xTickCount: настроить количество делений, которые будут отображаться на оси X (по умолчанию 3)
  • yTickCount: Настройте числа тактов, чтобы они отображались на оси Y (по умолчанию 3).
  • legendPosition: Укажите, где разместить легенду.
  • showLine: точки соединяются в линию.
  • timeFormat: определяет формат времени
  • dotSize: изменить размер точки (по умолчанию 1).
  • dataColors: Массив наборов данных с разными цветами
  • fontFamily: настроить семейство шрифтов, используемых в диаграмме.
  • unxkcdify: отключить эффект xkcd (по умолчанию false)

Показать результаты

Если вы хотите соединить точки, чтобы сделать контраст данных более очевидным. пожалуйста, изменитеshowLine：trueОбновите страницу, и вы увидите эффект подключения.

3.3 Гистограмма

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

образец кода

<script>
    // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".bar-chart" 的元素。
    const svg = document.querySelector('.bar-chart');
    // chartXkcd.Bar 创建一个条形图
    const barChart = new chartXkcd.Bar(svg, {
        // 图表的标题
        title: 'github stars VS patron number',
        // xLabel: '', // optional
        // yLabel: '', // optional
        // 图表数据
        data: {
            labels: ['github stars', 'patrons'],
            datasets: [{
                data: [100, 2],
            }],
        },
        options: {
            // 自定义要在 y 轴上看到的刻度号（默认为 3）
            yTickCount: 2,
        },
    });
</script>

Параметр Описание

  • yTickCount: Настройте числа тактов, чтобы они отображались на оси Y (по умолчанию 3).
  • dataColors: Массив наборов данных с разными цветами
  • fontFamily: настроить семейство шрифтов, используемых в диаграмме.
  • unxkcdify: отключить эффект xkcd (по умолчанию false)

Показать результаты

3.4 Круговая/пончиковая диаграмма

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

образец кода

<script>
    // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".pie-chart" 的元素。
    const svg = document.querySelector('.pie-chart');
    // chartXkcd.Pie 创建一个圆饼图
    const pieChart = new chartXkcd.Pie(svg, {
        // 图表的标题
        title: 'What Tim made of',
        // 需要可视化的数据
        data: {
            labels: ['a', 'b', 'e', 'f', 'g'],
            datasets: [{
                data: [500, 200, 80, 90, 100],
            }],
        },
        options: {
            // 指定空的饼图半径
            innerRadius: 0.5,
            // 指定要放置图例的位置
            legendPosition: chartXkcd.config.positionType.upRight,
        },
    });

</script>

Параметр Описание

  • innerRadius: указывает пустой радиус круга (по умолчанию: 0,5)
    • Нужна круговая диаграмма? БудуinnerRadiusустановить на 0
  • legendPosition: Укажите, где разместить легенду.
  • dataColors: Массив наборов данных с разными цветами
  • fontFamily: настроить семейство шрифтов, используемых в диаграмме.
  • unxkcdify: отключить эффект xkcd (по умолчанию false)

Показать результаты

3.5 Радиолокационная диаграмма

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

образец кода

<script>
    // querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。获取文档中 class=".radar-chart" 的元素。
    const svg = document.querySelector('.radar-chart');
    // chartXkcd.Radar 创建一个雷达图
    const radarChart = new chartXkcd.Radar(svg, {
        // 图表的标题
        title: 'Letters in random words',
        // 需要可视化的数据
        data: {
            labels: ['c', 'h', 'a', 'r', 't'],
            datasets: [{
                label: 'ccharrrt',
                data: [2, 1, 1, 3, 1],
            }, {
                label: 'chhaart',
                data: [1, 2, 2, 1, 1],
            }],
        },
        options: {
            // 在图表中显示图例
            showLegend: true,
            // 点的大小
            dotSize: 0.8,
            // 在每行附近显示标签
            showLabels: true,
            // 指定要放置图例的位置
            legendPosition: chartXkcd.config.positionType.upRight,
            // unxkcdify: true,
        },
    });
</script>

Параметр Описание

  • showLabels: отображать метки рядом с каждой строкой (по умолчанию false)
  • ticksCount: Настройте числа тактов, чтобы они отображались в основной строке (по умолчанию 3).
  • dotSize: изменить размер точки (по умолчанию 1).
  • showLegend: показать легенду рядом с графиком (по умолчанию false)
  • legendPosition: Укажите, где разместить легенду.
  • dataColors: Массив наборов данных с разными цветами
  • fontFamily: настроить семейство шрифтов, используемых в диаграмме.
  • unxkcdify: отключить эффект xkcd (по умолчанию false)

Показать результаты

Четвертый, последний

Вышеизложенное является полным содержанием объяснения.Я считаю, что вы в основном освоили базовое использование библиотеки Chart.xkcd в этом руководстве.Вы можете использовать то, что вы узнали сегодня, для улучшения внешнего вида вашего проекта.

С помощью Chart.xkcd несложно красиво отобразить данные, так что давайте сделаем это самостоятельно~

5. Ссылки

CHART.XKCD Официальная документация

Адрес проекта CHART.XKCD

"Разъяснение серии проектов с открытым исходным кодом" - Пусть больше не боятся люди, интересующиеся проектами с открытым исходным кодом, и пусть инициаторы проектов с открытым исходным кодом больше не будут одиноки. Следите за нашими статьями, и вы откроете для себя радости программирования, насколько легко им пользоваться, и узнаете, как легко участвовать в проектах с открытым исходным кодом. Добро пожаловать, чтобы оставить сообщение, чтобы связаться с нами, присоединиться к нам, позволить большему количеству людей влюбиться в открытый исходный код и внести свой вклад в открытый исходный код~

Категории