Highcharts 非常实用的Javascript统计图demo示例

Highcharts是一个非常流行的Javascript图表库，可以用来创建各种类型的动态统计图表，包括线图、柱状图、饼图等。下面我们来介绍如何使用Highcharts创建一些常见的图表。

基本步骤

要使用Highcharts创建图表，需要进行以下几个基本步骤：

引入Highcharts库文件，可以在Highcharts官网上下载。
创建一个容器元素来存放图表。
使用Javascript代码来配置和绘制图表。

示例一：折线图

以下是一个简单的折线图的代码示例：

<!DOCTYPE html>
<html>
<head>
  <title>折线图示例</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
  <div id="container" style="width:100%; height:400px;"></div>
  <script>
    Highcharts.chart('container', {
      title: {
        text: '月销售量'
      },
      xAxis: {
        categories: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        title: {
          text: '销售量 (件)'
        }
      },
      series: [{
        name: '销售量',
        data: [50, 70, 90, 60, 80, 100]
      }]
    });
  </script>
</body>
</html>

该示例创建了一个折线图，其中x轴表示月份，y轴表示销售量，数据为每月的销售量。Highcharts.chart()方法用于创建一个图表，参数中包含了图表的各个配置项。

示例二：饼图

以下是一个简单的饼图的示例：

<!DOCTYPE html>
<html>
<head>
  <title>饼图示例</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
  <div id="container" style="width:100%; height:400px;"></div>
  <script>
    Highcharts.chart('container', {
      title: {
        text: '浏览器市场份额'
      },
      series: [{
        type: 'pie',
        name: '市场份额',
        data: [
          ['Chrome', 45.0],
          ['Internet Explorer', 26.8],
          ['Firefox', 12.8],
          ['Microsoft Edge', 5.3],
          ['Safari', 4.4],
          ['Opera', 1.6],
          ['其他', 4.1]
        ]
      }]
    });
  </script>
</body>
</html>

该示例创建了一个饼图，其中包含了各个浏览器的市场份额。Highcharts.chart()方法中的type参数指定了图表的类型为饼图，name参数为数据系列名称，data参数则为各个数据点的数值和标签。

以上是Highcharts的两个示例，您可以根据自己的需要添加或修改配置来显示不同的图表类型。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Highcharts 非常实用的Javascript统计图demo示例 - Python技术站

Highcharts 非常实用的Javascript统计图demo示例

基本步骤

示例一：折线图

示例二：饼图

相关文章