How to use waterfall charts to display data in Highcharts

How to use waterfall charts to display data in Highcharts requires specific code examples

Waterfall Chart is a commonly used data visualization chart, which can Displays the ups and downs of data, especially suitable for displaying financial data, sales data, inventory data, etc. In Highcharts, we can easily use waterfall charts to display data and customize it by setting some parameters. The following will introduce how to use waterfall charts to display data in Highcharts, and provide specific code examples.

1. Introduce Highcharts library files.

Introduce Highcharts library files into the HTML file, including Highcharts.js and Highcharts-more.js. If you need to use the histogram module of Highcharts, you also need to introduce the highcharts-3d.js file.

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

2. Create container.

Create a container in the HTML file to display Highcharts charts.

<div id="container" style="width: 800px; height: 400px;"></div>

3. Write JavaScript code.

Create a JavaScript function to generate a waterfall chart.

function createWaterfallChart() {
  // 定义数据
  var categories = ['开支1', '收入1', '开支2', '收入2', '开支3'];
  var amounts = [1000, -800, -500, 600, -300];

  // 创建图表
  Highcharts.chart('container', {
    chart: {
      type: 'waterfall'
    },
    title: {
      text: '瀑布图示例'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      title: {
        text: '金额'
      }
    },
    legend: {
      enabled: false
    },
    series: [{
      name: '金额',
      data: amounts,
      dataLabels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.y, 0, '', ',');
        },
        style: {
          color: '#ffffff',
          textOutline: 0
        }
      }
    }],
    tooltip: {
      pointFormat: '<b>{point.y}</b> 元'
    }
  });
}

// 调用函数生成瀑布图
createWaterfallChart();

In the above code, we first define the data, where categories represent the categories of data and amounts represent the numerical values ​​of the data. Then create a chart through the Highcharts.chart method, where chart.type is set to 'waterfall', which means a waterfall chart is generated. The configuration items xAxis and yAxis set the relevant parameters of the x-axis and y-axis respectively. Legend is set to false, which means the legend is not displayed. In the series, set name to 'amount' and data to amounts, which represents the data to be displayed. Set the data labels to be visible through dataLabels.enabled, and set the format of the data labels through formatter. tooltip is used to set the content of the prompt box.

4. Run the code.

Save the HTML file and open it through the browser to see the generated waterfall chart.

Through the above steps, we can easily use waterfall charts to display data in Highcharts. According to actual needs, we can further personalize the chart, including adjustments to color, style, etc. Hope the above content is helpful to you!

The above is the detailed content of How to use waterfall charts to display data in Highcharts. For more information, please follow other related articles on the PHP Chinese website!