Hand-drawn style JS Chart library: chart.xkcd

Author: HelloGitHub- Kalifun

Chart.xkcd (http://www.chart.xkcd, http://www.chart.xkcd, http://www.chart.xkcd, http://www.chart.xkcd, http://www.chart.xkcd, http://www.chart.xkcd, http://www.chart.xkcd)

Introduce a,

Project address: github.com/timqian/cha…

Chart.xkcd is a Chart library for plotting “non-detailed”, “cartoon” or “hand-drawn” charts.

Isn’t the effect cute? Then follow HelloGitHub launched “explain open source project” tutorial together to learn, get started to use it!

Second, start fast

Chart.xkcd is easy to use, as long as the page contains a reference to the library and a < SVG > node to display the Chart.

2.1 Code Examples

Let’s start with a brief snippet of code to give you an idea of the basic parameters and what the code looks like, followed by a working code sample snippet for you to learn and use 😁.


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<! Embed SVG elements directly into HTML pages
<svg class="line-chart"></svg>
<! JS library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.xkcd.min.js"></script>
<script>
	// Key code block
  const svg = document.querySelector('.line-chart')
  new chartXkcd.Line(svg, {
    title: ' '.xLabel: ' '.yLabel: ' '.data: {... },options: {},});</script>
</body>
</html>
Copy the code

2.2 Parameter Description

title: The title of the chart
xLabel: the X label of the chart
yLabel: Y label of the chart
data: Data to be visualized
options: User-defined Settings

Iii. Types of charts

Chart.xkcd supports a variety of Chart types, which will be explained and implemented one by one below: line Chart, XY Chart, bar Chart, pie/donut Chart, radar Chart.

Tips: The sample code below can be run directly, saved as AN HTML file, and viewed locally.

3.1 the line chart

A line chart shows a series of data points in the form of broken lines, which can be used to show trend data or comparisons of different data sets.

The sample code


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<! Embed SVG elements directly into HTML pages
<svg class="line-chart"></svg>
<! JS library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.xkcd.min.js"></script>
<script>
    The querySelector() method returns an element in the document that matches the specified CSS selector. Gets the element in the document class=".line-chart".
    const svg = document.querySelector('.line-chart');

    // chartxkcd. Line creates a Line chart
    const lineChart = new chartXkcd.Line(svg, {
        // The title of the chart
        title: 'Monthly income of an indie developer'.// The x label of the chart
        xLabel: 'Month'.// The y label of the graph
        yLabel: '$ Dollors'.// Data to be visualized
        data: {
            // X-axis data
            labels: ['1'.'2'.'3'.'4'.'5'.'6'.'7'.'8'.'9'.'10'].// Y-axis data
            datasets: [{
                // First set of data
                label: 'Plan'.data: [30.70.200.300.500.800.1500.2900.5000.8000],}, {// Second set of data
                label: 'Reality'.data: [0.1.30.70.80.100.50.80.40.150]],}},// Optional configuration to customize the appearance of the chart
        options: {
            // Define the scale to see on the y axis (default: 3)
            yTickCount: 3.// Specify where to place the legend
            legendPosition: chartXkcd.config.positionType.upLeft
        }
    });
</script>
</body>
</html>
Copy the code

Parameters that

yTickCount: Customize the scale number to see on the Y-axis (default: 3)
legendPosition: Specifies where to place the legend (defaultchartXkcd.config.positionType.upLeft).
- Upper left position:chartXkcd.config.positionType.upLeft
- Top right position:chartXkcd.config.positionType.upRight
- Lower left position:chartXkcd.config.positionType.downLeft
- Lower right position:chartXkcd.config.positionType.downRight
dataColors: Number of data sets in different colors
fontFamily: Customizes the font family used in charts
unxkcdify: Disables XKCD effects (default: false)

Results show

3.2 the XY figure

The XY chart is used to plot points by specifying their XY coordinates, or you can plot XY line charts by connecting points.

The sample code

<script>
    The querySelector() method returns an element in the document that matches the specified CSS selector. Get the class=".xy-chart" element in the document.
    const svg = document.querySelector('.xy-chart');
    // chartxkcd.xy creates an XY graph
    new chartXkcd.XY(svg, {
        // The title of the chart
        title: 'Pokemon farms'.// The x label of the chart
        xLabel: 'Coodinate'.// The y label of the graph
        yLabel: 'Count'.// Data to be visualized
        data: {
            datasets: [{
                // First set of data
                label: 'Pikachu'.data: [{ x: 3.y: 10 }, { x: 4.y: 122 }, { x: 10.y: 100 }, { x: 1.y: 2 }, { x: 2.y: 4}],}, {// Second set of data
                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: {
            // Customize the scale number to see on the x axis (default: 3)
            xTickCount: 5.// Define the scale to see on the y axis (default: 3)
            yTickCount: 5.// Specify where to place the legend
            legendPosition: chartXkcd.config.positionType.upRight,
            // Connect points with lines (default false)
            showLine: false.// Specify the time format
            timeFormat: undefined.// Change the size of the point (default 1)
            dotSize: 1,}});</script>
Copy the code

Parameters that

xTickCount: Customize the scale number to see on the x axis (default: 3)
yTickCount: Customize the scale number to see on the Y-axis (default: 3)
legendPosition: Specifies where to place the legend
showLine: Connect dots into lines.
timeFormat: Specifies the time format
dotSize: Change the size of the point (default: 1)
dataColors: Number of data sets in different colors
fontFamily: Customizes the font family used in charts
unxkcdify: Disables XKCD effects (default: false)

Results show

If you want to connect the dots, make the comparison more obvious. Please change showLine: true and refresh the page to see the effect of the connection.

3.3 the bar chart

Bar charts provide a way to display data values represented as vertical bars.

The sample code

<script>
    The querySelector() method returns an element in the document that matches the specified CSS selector. Get the element in the document class=".bar-chart".
    const svg = document.querySelector('.bar-chart');
    // chartxkcd. Bar creates a Bar chart
    const barChart = new chartXkcd.Bar(svg, {
        // The title of the chart
        title: 'github stars VS patron number'.// xLabel: '', // optional
        // yLabel: '', // optional
        // Graph data
        data: {
            labels: ['github stars'.'patrons'].datasets: [{
                data: [100.2]],}},options: {
            // Define the scale to see on the y axis (default: 3)
            yTickCount: 2,}});</script>
Copy the code

Parameters that

yTickCount: Customize the scale number to see on the Y-axis (default: 3)
dataColors: Number of data sets in different colors
fontFamily: Customizes the font family used in charts
unxkcdify: Disables XKCD effects (default: false)

Results show

3.4 Pie/donut diagram

Pie charts are widely used in various fields to show the proportion of different categories and compare various categories through radians. The pie chart divides a pie into multiple blocks according to the proportion of classification. The whole pie represents the total amount of data, and each block (arc) represents the proportion of the classification to the whole. The sum of all blocks (arc) is equal to 100%.

The sample code

<script>
    The querySelector() method returns an element in the document that matches the specified CSS selector. Get the element in the document class=".pie-chart".
    const svg = document.querySelector('.pie-chart');
    // chartxkcd.pie creates a Pie chart
    const pieChart = new chartXkcd.Pie(svg, {
        // The title of the chart
        title: 'What Tim made of'.// Data to be visualized
        data: {
            labels: ['a'.'b'.'e'.'f'.'g'].datasets: [{
                data: [500.200.80.90.100]],}},options: {
            // Specify an empty pie radius
            innerRadius: 0.5.// Specify where to place the legend
            legendPosition: chartXkcd.config.positionType.upRight,
        },
    });

</script>
Copy the code

Parameters that

innerRadius: Specifies an empty pie radius (default: 0.5)
- Need a pie chart? willinnerRadiusSet to zero
legendPosition: Specifies where to place the legend
dataColors: Number of data sets in different colors
fontFamily: Customizes the font family used in charts
unxkcdify: Disables XKCD effects (default: false)

Results show

3.5 entirely

The Radar Chart, also known as a spider’s web Chart, is suitable for showing variables with three or more dimensions. A radar chart is a method of displaying multivariate data in the form of a two-dimensional chart of three or more variables displayed on an axis starting at the same point, where the relative position and Angle of the axis are often meaningless.

The sample code

<script>
    The querySelector() method returns an element in the document that matches the specified CSS selector. Get the element in the document class=".radars-chart ".
    const svg = document.querySelector('.radar-chart');
    // chartXkcd.Radar Creates a Radar map
    const radarChart = new chartXkcd.Radar(svg, {
        // The title of the chart
        title: 'Letters in random words'.// Data to be visualized
        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: {
            // Display the legend in the chart
            showLegend: true.// The size of the dot
            dotSize: 0.8.// Display labels near each line
            showLabels: true.// Specify where to place the legend
            legendPosition: chartXkcd.config.positionType.upRight,
            // unxkcdify: true,}});</script>
Copy the code

Parameters that

showLabels: Displays labels near each line (default: false)
ticksCount: Customizes the scale number to see on the main row (default: 3)
dotSize: Change the size of the point (default: 1)
showLegend: Displays legends near diagrams (default: false)
legendPosition: Specifies where to place the legend
dataColors: Number of data sets in different colors
fontFamily: Customizes the font family used in charts
unxkcdify: Disables XKCD effects (default: false)

Results show

Four, the last

The above is all the content explained, I believe that the tutorial so far chart.xkCD library basic usage you have a basic grasp, behind can be used to learn today’s things, improve their own project appearance level.

With chart.xkcd, it’s not hard to make your data look cute

5. Reference materials

Chart.xkcd Official document

Chart.xkcd project address

“Explain Open Source Project series” — let the people who are interested in open source projects not be afraid, let the initiator of open source projects not be alone. Follow along as you discover the joys of programming, use, and how easy it is to get involved in open source projects. Welcome to leave a message to contact us, join us, let more people fall in love with open source, contribute to open source ~

Hand-drawn style JS Chart library: chart.xkcd

Introduce a,

Second, start fast

2.1 Code Examples

2.2 Parameter Description

Iii. Types of charts

3.1 the line chart

3.2 the XY figure

3.3 the bar chart

3.4 Pie/donut diagram

3.5 entirely

Four, the last

5. Reference materials

Related Posts

Vue component communication mode

Preparation – Learn vue source code series 1

Deep copy – Handling of circular references