Home > Web Front-end > JS Tutorial > body text

How to create a horizontal bar chart using Highcharts

PHPz
Release: 2023-12-17 22:16:15
Original
716 people have browsed it

How to create a horizontal bar chart using Highcharts

How to use Highcharts to create a horizontal bar chart, specific code examples are required

Introduction: Highcharts is a very powerful JavaScript chart library for creating various types of charts interactive chart. Horizontal bar charts are one of the common forms of data visualization. This article will introduce how to use Highcharts to create horizontal bar charts and provide specific code examples.

1. Preparation
Before you begin, make sure you have introduced the Highcharts JavaScript file and created a container in HTML for displaying charts. The following is a simple example:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.highcharts.com/highcharts.js"></script>
  </head>
  <body>
    <div id="chartContainer"></div>
  </body>
</html>
Copy after login

2. Create data
First, define the data you want to display in JavaScript. The data for each bar usually consists of two parts: the name of the bar and the corresponding value. The following is a sample data:

var data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
  { name: 'D', value: 40 }
];
Copy after login

3. Create a horizontal bar chart
Use the chart function of Highcharts to create a chart object and set some basic configuration options. The following is a sample code:

Highcharts.chart('chartContainer', {
  chart: {
    type: 'bar'
  },
  title: {
    text: '水平条形图'
  },
  xAxis: {
    title: {
      text: '值'
    }
  },
  yAxis: {
    title: {
      text: '名称'
    }
  },
  series: [{
    data: data
  }]
});
Copy after login

4. Add styles and options
By adjusting configuration options and styles, you can personalize the horizontal bar chart in various ways. Here are some commonly used configuration options and style properties:

  1. Color of column bars: Change the color of column bars by setting the color property. For example:
series: [{
  data: data,
  color: '#FF0000' // 设置柱状条的颜色为红色
}]
Copy after login
  1. Bar chart title: Change the bar chart title by setting the title.text property. For example:
title: {
  text: '销售数据'
}
Copy after login
  1. Style of axis labels: Change the style of axis labels by setting the xAxis.labels and yAxis.labels properties . For example:
xAxis: {
  labels: {
    style: {
      fontSize: '12px' // 设置 x 轴标签的字体大小为 12px
    }
  }
},
yAxis: {
  labels: {
    style: {
      fontWeight: 'bold' // 设置 y 轴标签的字体加粗
    }
  }
}
Copy after login

Summary:
With the above steps, you can easily create a horizontal bar chart using Highcharts and personalize it as needed. Remember, Highcharts provides more configuration options and style properties that you can customize according to your needs.

Reference link: https://www.highcharts.com/demo/bar-basic

The above is the detailed content of How to create a horizontal bar chart using Highcharts. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!