CodeNodeX AI
Sign upWrite

Learning Path

Highcharts tutorials

Browse tutorials and chapters for Highcharts.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

70

TAXONOMYFrontendFetched/Highcharts

Highcharts 教程

Highcharts 教程 Highcharts 是一个用纯JavaScript编写的一个图表库。 Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表 Highcharts 免费提供给个人学习、个人网站和非商业用途使用。 HighCharts 特性 兼容性 - 支持所有主流浏览器和移动平台（android、iOS等）。 多设备 - 支持多种设备，如手持设备 iPhone/iPad、平板等。 ..

TUTORIALFrontendFetched/Highcharts

Highcharts 3D图

Highcharts 3D图 本章节我们将为大家介绍 Highcharts 的3D图。 序号图表类型 13D 柱形图 2带空值的3D 柱形图 3堆叠 3D 柱形图 43D 饼图 53D 圆环图..

TUTORIALFrontendFetched/Highcharts

Highcharts 带空值(null)和0的3D柱形图

Highcharts 带空值(null)和0的3D柱形图 Highcharts 3D图 以下实例演示了带空值(null)和0的3D柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.options3d 配置 以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 column，options3d 选项可设置三维效果。 var chart ..

TUTORIALFrontendFetched/Highcharts

Highcharts 3D柱形图

Highcharts 3D柱形图 Highcharts 3D图 以下实例演示了3D柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.options3d 配置 以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 column，options3d 选项可设置三维效果。 var chart = { type: 'colum..

TUTORIALFrontendFetched/Highcharts

Highcharts 3D圆环图

Highcharts 3D圆环图 Highcharts 3D图 以下实例演示了3D饼图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.options3d 配置 以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 pie，options3d 选项可设置三维效果。 var chart = { type: 'pie'..

TUTORIALFrontendFetched/Highcharts

Highcharts 3D饼图

Highcharts 3D饼图 Highcharts 3D图 以下实例演示了3D饼图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.options3d 配置 以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 pie，options3d 选项可设置三维效果。 var chart = { type: 'pie',..

TUTORIALFrontendFetched/Highcharts

Highcharts 堆叠3D柱形图

Highcharts 堆叠3D柱形图 Highcharts 3D图 以下实例演示了堆叠3D柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.options3d 配置 以下列出了 3D 图的基本配置，设置 chart 的 type 属性为 column，options3d 选项可设置三维效果。 var chart = { type: 'c..

TUTORIALFrontendFetched/Highcharts

Highcharts 测量图

Highcharts 测量图 本章节我们将为大家介绍 Highcharts 的测量图。 序号图表类型 1测量图 2圆形进度条式测量图 3时钟 4双轴车速表 5音量表（VU Meter）..

TUTORIALFrontendFetched/Highcharts

Highcharts 基本区域图

Highcharts 基本区域图 Highcharts 区域图 以下实例演示了基础区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置： 配置 chart chart.type 配置项用于设定图表类型，默认为 'line'，本章节我们使用 'area'。 var chart = { type: 'area' }; ..

TUTORIALFrontendFetched/Highcharts

Highcharts 区域图

Highcharts 区域图 本章节我们为大家介绍几种区域图类型。 序号图表类型 1基本区域图 2区域图，使用负值 3堆叠区域图，各个区域叠加 4使用百分比的区域图 5丢失数据的区域图 6反转x轴与y轴 7曲线区域图 8区间区域图 9区域区间和线..

TUTORIALFrontendFetched/Highcharts

Highcharts 反转x轴与y轴

Highcharts 反转x轴与y轴 Highcharts 区域图 以下实例演示了反转x轴与y轴区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 chart 中添加 inverted 属性。 chart 配置 将 chart 的 inverted 属性设置为 true，X轴为垂直，Y轴为水平的。 var chart = { type: 'area..

TUTORIALFrontendFetched/Highcharts

Highcharts 丢失值区域图

Highcharts 丢失值区域图 Highcharts 区域图 以下实例演示了丢失值区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 chart 中添加 spacingBottom 属性。 chart 配置 将 chart 的 spacingBottom 属性设置为 30。表示图表间的间隔区间。 var chart = { type: 'area�..

TUTORIALFrontendFetched/Highcharts

Highcharts 使用负数区域图

Highcharts 使用负数区域图 Highcharts 区域图 以下实例演示了使用负数区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的实例： 实例 文件名：highcharts_area_negative.htm Highcharts 教程 | 菜鸟教程(runoob.com) $(document).ready(function() { var ..

TUTORIALFrontendFetched/Highcharts

Highcharts 百分比堆叠区域图

Highcharts 百分比堆叠区域图 Highcharts 区域图 以下实例演示了百分比堆叠区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 plotOptions 中添加 stacking 属性： 配置 plotOptions：数据点选项 plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。 配置图..

TUTORIALFrontendFetched/Highcharts

Highcharts 区间区域图

Highcharts 区间区域图 Highcharts 区域图 以下实例演示了区间区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 chart 中修改 type 属性。 chart 配置 将 chart 的 type 属性设置为 arearange，chart.type 描述了图表类型。默认值为 'line'。 var chart = { ty..

TUTORIALFrontendFetched/Highcharts

Highcharts 使用区间和线的区域图

Highcharts 使用区间和线的区域图 Highcharts 区域图 以下实例演示了使用区间和线的区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 chart 中修改 type 属性。 chart 配置 将 chart 的 type 属性设置为 arearange，chart.type 描述了图表类型。默认值为 'line'。 var chart..

TUTORIALFrontendFetched/Highcharts

Highcharts 曲线区域图

Highcharts 曲线区域图 Highcharts 区域图 以下实例演示了曲线区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 chart 中修改 type 属性。 chart 配置 将 chart 的 type 属性设置为 areaspline，chart.type 描述了图表类型。默认值为 'line'。 var chart = { t..

TUTORIALFrontendFetched/Highcharts

Highcharts 堆叠区域图

Highcharts 堆叠区域图 Highcharts 区域图 以下实例演示了堆叠区域图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 plotOptions 中添加 stacking 属性： 配置 plotOptions：数据点选项 plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。 配置图表堆叠设置 ..

TUTORIALFrontendFetched/Highcharts

Highcharts 基本条形图

Highcharts 基本条形图 Highcharts 条形图 以下实例演示了基本条形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart 配置 设置 chart 的 type 属性 为 bar ，chart.type 描述了图表类型。默认值为 'line'。 var chart = { type: 'bar' }; ..

TUTORIALFrontendFetched/Highcharts

Highcharts 条形图

Highcharts 条形图 本章节我们将为大家介绍几种条形图的类型。 序号图表类型 1基本条形图 2堆叠条形图 3反向条形图..

TUTORIALFrontendFetched/Highcharts

Highcharts 反向条形图

Highcharts 反向条形图 Highcharts 条形图 以下实例演示了使用负值的，反向条形图。 实例 文件名：highcharts_bar_negative.htm Highcharts 教程 | 菜鸟教程(runoob.com) $(document).ready(function() { var chart = { type: 'bar' }; ..

TUTORIALFrontendFetched/Highcharts

Highcharts 堆叠条形图

Highcharts 堆叠条形图 Highcharts 条形图 以下实例演示了堆叠条形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 plotOptions 配置图表堆叠使用 plotOptions.series.stacking，并设置为 'normal'。如果禁用堆叠可设置为 null ， 'normal' 通过值设置堆叠， ..

TUTORIALFrontendFetched/Highcharts

Highcharts 气泡图

Highcharts 气泡图 本章节我们将为大家介绍 Highcharts 的气泡图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。 配置 chart 配置 配置 chart 的 type 为 'bubble' 。chart.type 描述了图表类型。默认值为 'line'。 chart.zoomType 属性可配置图表放大..

TUTORIALFrontendFetched/Highcharts

Highcharts 基本柱形图

Highcharts 基本柱形图 Highcharts 柱形图 以下实例演示了基本柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart 配置 设置 chart 的 type 属性 为 column ，chart.type 描述了图表类型。默认值为 'line'。 var chart = { type: 'column&#..