Learning Path
浏览 Highcharts 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
70
Highcharts 基本曲线图 Highcharts 曲线图 以下实例是基础曲线图。我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看个完整实例： 实例 文件名：highcharts_line_basic.htm Highcharts 教程 | 菜鸟教程(runoob.com) $(document).ready(function() { var title = { te..
Highcharts 曲线图 下表列出了 Highcharts 不同类型的曲线图： 序号图表类型 1基本曲线图表 2带有数据标签图表 3图表异步加载数据 4时间序列，可缩放的图表 5X轴翻转曲线图 6带标记曲线图 7标示区曲线图 8不规则时间间隔图表 9对数 x 轴..
Highcharts 带有数据标签曲线图表 Highcharts 曲线图 以下实例是带有数据标签曲线图表。我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看个完整实例： 实例 文件名：highcharts_line_labels.htm Highcharts 教程 | 菜鸟教程(runoob.com) $(document).ready(function() { var titl..
Highcharts 对数图表 Highcharts 曲线图 以下实例演示了对数图表。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下如何配置。 配置 配置 yAxis.type 为 'logarithmic'。它定义了 x 轴类型。可选值有 'linear', 'logarithmic', 'datetime' 或 �..
Highcharts 时间序列，可缩放的图表 Highcharts 曲线图 以下实例演示了基于时间的曲线图表。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看个完整实例： 配置 图表 配置可缩放图表。 chart.zoomType 指定了用户可以拖放的尺寸，用户可以通过拖动鼠标来放大，可能值是x，y或xy： var chart = { zoomType: 'x' }; pl..
Highcharts 基本饼图 Highcharts 饼图 以下实例演示了基本饼图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 series 配置 设置 series 的 type 属性为 pie ，series.type 描述了数据列类型。默认值为 'line'。 var series = { type: 'pie' ..
Highcharts 饼图 下表列出了 Highcharts 不同类型的饼图： 序号图表类型 1基本饼图 2显示图例饼图 3圆环图 4半圈圆环图 5向下钻取饼图 6渐变饼图 7单色饼图..
Highcharts 圆环图 Highcharts 饼图 以下实例演示了圆环图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart 配置 设置 chart 的 type 属性为 pie chart.type 描述了图表类型。默认值为 'line'。 var chart = { type: 'pie' }; 实例 文..
Highcharts 向下钻取饼图 Highcharts 饼图 以下实例演示了向下钻取饼图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 drilldown 配置 drilldown 用于向下钻取数据，通过点击某项深入到其中的具体数据。 drilldown: { series: drilldownSeries } 实例 文件名：highcharts_pie_d..
Highcharts 渐变饼图 Highcharts 饼图 以下实例演示了渐变饼图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 colors 配置 使用 Highcharts.getOptions().colors 属性来配置颜色。 //颜色的填充 Highcharts.getOptions().colors = Highcharts.map(Highcharts.g..
Highcharts 显示图例饼图 Highcharts 饼图 以下实例演示了显示图例饼图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 series 配置 设置 series 的 type 属性为 pie ，series.type 描述了数据列类型。默认值为 'line'。 var series = { type: 'pie..
Highcharts 单色饼图 Highcharts 饼图 以下实例演示了单色饼图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 colors 配置 使用 Highcharts.getOptions().plotOptions.pie.colors 属性来配置每个饼的颜色。 // 设置单色并为所有饼设置默认主题 Highcharts.getOptions().plot..
Highcharts 半圈圆环图 Highcharts 饼图 以下实例演示了半圈圆环图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 series 配置 设置 series 的 type 属性为 pie series.type 描述了数据列类型。默认值为 'line'。配置饼图大小使用 innerSize 属性并设置为innerSize: '..
Highcharts 散点图 本章节我们将为大家介绍 Highcharts 的散点图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。 配置 chart 配置 配置 chart 的 type 为 'scatter' 。chart.type 描述了图表类型。默认值为 'line'。 chart.zoomType 属性可配置图表放..
Highcharts 配置选项详细说明 Highcharts 提供大量的配置选项参数，您可以轻松定制符合用户要求的图表，本章节为大家详细介绍Highcharts 配置选项使用说明： 参数配置(属性+事件) chart.events.addSeries：添加数列到图表中。 chart.events.click：整个图表的绘图区上所发生的点击事件。 chart.events.load：图表加载事件。 chart.event..
Highcharts 环境配置 本章节我们将为大家介绍如何在网页中使用 Highcharts。 本教程将 Highcharts 与 jQuery 结合使用，所以在加载 Highcharts 前必须先加载 jQuery 库。 如果你对 jQuery 不熟悉，可以参阅本站的jQuery 教程。 安装 jQuery jQuery 安装可以使用以下两种方式： 1、访问 jquery.com 下载jQuery包。 2、使用 Staticfil..
Highcharts 标示区曲线图 Highcharts 曲线图 以下实例演示了标示区曲线图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下如何配置。 配置 使用 yAxis.plotBands 属性来配置标示区。区间范围使用 'from' 和 'to' 属性。颜色设置使用 'color' 属性。标签样式使用 'label..
Highcharts X 轴翻转曲线图 Highcharts 曲线图 以下实例演示了 X 轴翻转曲线图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看个完整实例： 配置 配置图表类型 type 为 spline。chart.type 默认为 'line'。 配置 X 轴翻转。inverted 设置为 true 即 X 轴翻转，默认为 false。 chart var chart..
Highcharts 带标记曲线图 Highcharts 曲线图 以下实例演示了 带标记曲线图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下如何配置。 配置 我们使用 marker.symbol 属性来配置标记。标记可以是 'square', 'diamond' 或 图片 url。标记可以添加在任何的数据点上： var series= [{ ..
Highcharts 时间间隔图表 Highcharts 曲线图 以下实例演示了时间间隔图表。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下如何配置。 实例 文件名：highcharts_spline_time.htm Highcharts 教程 | 菜鸟教程(runoob.com) $(document).ready(function() { var chart ..
Highcharts 树状图(Treemap) 本章节我们将为大家介绍 Highcharts 的热点图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。 树状图 series 配置 设置 series 的 type 属性为 treemap ，series.type 描述了数据列类型。默认值为 'line'。 var chart = { ..
Highcharts 教程 Highcharts 是一个用纯JavaScript编写的一个图表库。 Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表 Highcharts 免费提供给个人学习、个人网站和非商业用途使用。 HighCharts 特性 兼容性 - 支持所有主流浏览器和移动平台（android、iOS等）。 多设备 - 支持多种设备，如手持设备 iPhone/iPad、平板等。 ..