Home > Article > Web Front-end > How to create a horizontal bar chart using Highcharts

How to create a horizontal bar chart using Highcharts

PHPzOriginal: 2023-12-17 22:16:15753browse

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>

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 }
];

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
  }]
});

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:

Color of column bars: Change the color of column bars by setting the color property. For example:

series: [{
  data: data,
  color: '#FF0000' // 设置柱状条的颜色为红色
}]

Bar chart title: Change the bar chart title by setting the title.text property. For example:

title: {
  text: '销售数据'
}

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 轴标签的字体加粗
    }
  }
}

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!

JavaScript html 对象 https

Statement：

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

Previous article：JavaScript and WebSocket: Building an efficient real-time search engineNext article：JavaScript and WebSocket: Building an efficient real-time search engine

See more

How to create a horizontal bar chart using Highcharts

Related articles