投稿
  1. 简单一点首页
  2. 编程

Highcharts软件教程

OEKEU • • 编程

Highcharts是一款非常流行的JavaScript图表库，提供了许多类型的图表，可以制作出用户友好的、美观的图表。本文将为您介绍highcharts软件使用教程，从多个方面对该软件进行详细阐述，包括环境安装、基本图表类型、设置、自定义图表类型等方面，以帮助使用该软件的初学者快速上手。

一、安装环境

在使用Highcharts之前，需要安装一些必要的工具。首先，需要安装jQuery。Highcharts需要依赖于jQuery，因此请先下载并安装jQuery，并将其引入到HTML页面中。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

接下来，需要下载Highcharts源代码，并将其引入到HTML页面中：

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

安装完成后，即可开始使用Highcharts。

二、基本图表类型

Highcharts提供了许多常见的图表类型，如折线图、柱状图、饼图等。下面将逐一介绍这些基本图表类型的使用方法。

1. 折线图(Line Chart)

折线图用于显示数据随时间变化或其他顺序变化的情况，可以用来分析趋势。下面是一个简单的折线图：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  yAxis: {
    title: {
      text: 'Temperature (°C)'
    }
  },
  series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
  }, {
    name: 'New York',
    data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
  }, {
    name: 'Berlin',
    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
  }, {
    name: 'London',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});
</script>

上述代码中，我们首先在HTML页面中创建了一个div，然后在JavaScript代码中调用Highcharts.chart()方法，将该div的ID作为第一个参数。接着，我们通过title和subtitle属性设置图表的标题和子标题，通过xAxis和yAxis属性设置坐标轴的标题。最后在series属性中设置数据。该折线图由四个系列（Tokyo、New York、Berlin、London）组成，每个系列有12个数据点。

2. 柱状图(Column Chart)

柱状图用于统计数据，通过高度比较不同柱子的高度来比较数据大小。下面是一个简单的柱状图：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  series: [{
    name: 'Rainfall',
    data: [
      49.9,
      71.5,
      106.4,
      129.2,
      144.0,
      176.0,
      135.6,
      148.5,
      216.4,
      194.1,
      95.6,
      54.4
    ],
    color: '#3498db'
  }]
});
</script>

上述代码中，我们通过将chart属性设置为column来创建一个柱状图。接着，我们设置图表的标题、子标题和坐标轴。最后，在series属性中设置数据。

3. 饼图(Pie Chart)

饼图用于显示各个部分占比，常用于可视化数据。下面是一个简单的饼图：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Browser market shares in January, 2018'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  accessibility: {
    point: {
      valueSuffix: '%'
    }
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
      }
    }
  },
  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: [{
      name: 'Chrome',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'Internet Explorer',
      y: 11.84
    }, {
      name: 'Firefox',
      y: 10.85
    }, {
      name: 'Edge',
      y: 4.67
    }, {
      name: 'Safari',
      y: 4.18
    }, {
      name: 'Sogou Explorer',
      y: 1.64
    }, {
      name: 'Opera',
      y: 1.6
    }, {
      name: 'QQ',
      y: 1.2
    }, {
      name: 'Other',
      y: 2.61
    }]
  }]
});
</script>

上述代码中，我们通过将chart属性设置为pie来创建一个饼图。接着，我们设置图表的标题、tooltip、accessibility和plotOptions。在series属性中，设置饼图的数据。

三、设置

Highcharts提供了许多配置选项，可以帮助用户更好地控制图表的外观和行为。下面将介绍一些常用的设置选项。

1. 数据标签(Data Labels)

数据标签显示每个数据点的具体值，便于用户查看数据的具体数值。下面是一个数据标签的例子：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Historic World Population by Region'
  },
  subtitle: {
    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia</a>'
  },
  xAxis: {
    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Population (millions)',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ' millions'
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -40,
    y: 80,
    floating: true,
    borderWidth: 1,
    backgroundColor:
      Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Year 1800',
    data: [107, 31, 635, 203, 2]
  }, {
    name: 'Year 1900',
    data: [133, 156, 947, 408, 6]
  }, {
    name: 'Year 2000',
    data: [814, 841, 3714, 727, 31]
  }, {
    name: 'Year 2016',
    data: [1216, 1001, 4436, 738, 40]
  }]
});
</script>

上述代码中，我们在plotOptions下的bar属性中设置了数据标签。该数据标签将在每个条形的顶部显示相应的数值。可以设置数据标签的位置、格式和样式等属性。

2. 动画(Animation)

动画效果可以使图表更生动、更有趣，便于用户更好地理解数据。下面是一个简单的动画效果的例子：

<div id="container"></div>
<script>
Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec'
    ],
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  series: [{
    name: 'Rainfall',
    data: [
      49.9,
      71.5,
      106.4,
      129.2,
      144.0,
      176.0,
      135.6,
      148.5,
      216.4,
      194.1,
      95.6,
      54.4
    ],
    color: '#3498db',
    animation: {
      duration: 2000,
      easing: 'easeOutBounce'
    }
  }]
});
</script>

上述代码中，我们在series下的属性中设置了动画效果。该动画效果将在加载图表时播放。

四、自定义图表类型

Highcharts提供了一组灵活的API，可以帮助用户实现自定义的图表类型。下面是一个简单的自定义图表类型的例子：

<div id="container"></div>

<script>

// 自定义图表类型

Highcharts.seriesType('myChartType', 'line', {

// 添加自定义的方法和属性

myMethod: function () {

console.log('This is my custom method.');

},

myProperty: 'This is my custom property.'

}, {

// 添加自定义的默认选项

myOption: 42

});
Highcharts.chart('container', {
 chart: {
 type: 'myChartType'
 },
 title: {
 text: 'My custom chart type'
原创文章，作者：OEKEU，如若转载，请注明出处：https://www.506064.com/n/361763.html
赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
OEKEU的头像OEKEU
0 0
上一篇 2025-02-25 18:17
下一篇 2025-02-25 18:17

相关推荐

发表回复

登录后才能评论