How to create a horizontal bar chart using Highcharts-JS Tutorial-php.cn

How to create a horizontal bar chart using Highcharts

PHPz

Release： 2023-12-17 22:16:15

Original

827 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:

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

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

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

Copy after login

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!