Learning Path
浏览 Highcharts 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
70
Highcharts 柱形图 本章节我们将为大家介绍几种柱形图的类型。 序号图表类型 1基本柱形图 2反向柱形图 3堆叠柱形图 4堆叠组柱形图 5按百分比堆叠柱形图 6标签旋转柱形图 7向下钻取柱形图 8固定布局柱形图 9使用 html 表格数据的柱形图 10区间柱形图..
Highcharts 堆叠组柱形图 Highcharts 柱形图 以下实例演示了堆叠组柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 drilldown 中添加 series 属性： 配置 drilldown：向下钻取 drilldown 用于向下钻取数据，深入到其中的具体数据。 drilldown: { series: drilldownSeries }..
Highcharts 固定布局柱形图 Highcharts 柱形图 以下实例演示了固定布局柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 series 下添加 pointPlacement 和 pointPadding 配置。 series.pointPadding 控制每列之间的距离值，当highcharts图表宽度固定的情况下，此值越大，柱子宽度越小，反之相反。默认此值..
Highcharts 使用负值的反向柱形图 Highcharts 柱形图 以下实例演示了使用负值的反向柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart 配置 设置 chart 的 type 属性 为 column ，chart.type 描述了图表类型。默认值为 'line'。 var chart = { type: ..
Highcharts 使用百分比的堆叠柱形图 Highcharts 柱形图 以下实例演示了使用百分比的堆叠柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 plotOptions 中添加 stacking 属性： 配置 plotOptions：数据点选项 plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异..
Highcharts 区间柱形图 Highcharts 柱形图 以下实例演示了区间柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 chart 配置 配置 chart 的 type 为 'columnrange' 。chart.type 描述了图表类型。默认值为 'line'。 var chart = { type: '..
Highcharts 标签旋转柱形图 Highcharts 柱形图 以下实例演示了标签旋转柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 dataLabels 中添加 rotation 属性： 配置 dataLabels : 数据标签 dataLabels 定义图上是否显示数据标签。 文本旋转程度由 rotation 属性决定。我们还可以通过其他属性来定义文本标..
Highcharts 堆叠组柱形图 Highcharts 柱形图 以下实例演示了堆叠组柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 plotOptions 中添加 stacking 属性： 配置 plotOptions：数据点选项 plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。 配置图表堆叠设..
Highcharts 堆叠柱形图 Highcharts 柱形图 以下实例演示了堆叠柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 plotOptions 中添加 stacking 属性： 配置 plotOptions：数据点选项 plotOptions用于设置图表中的数据点相关属性。plotOptions根据各种图表类型，其属性设置略微有些差异。 配置图表堆叠设置 ..
Highcharts 使用 HTML 表格数据的柱形图 Highcharts 柱形图 以下实例演示了使用 HTML 表格数据的柱形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。在 data 下添加 table 配置。 data 数据模块提供了一些简单的接口用于添加数据，我们可以使用例如 CVS, HTML 表格或者网格视图中的数据。 data.table Html 表格中设置..
Highcharts 多Y轴组合 Highcharts 组合图 以下实例演示了多Y轴的组合。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 yAxis 配置 在 yAxis 属性中添加多条Y轴的值 。 var yAxis = [{ // 第一条Y轴 }, { // 第二条Y轴 },{ // 第三题Y轴 } }] 实例 文件名：h..
Highcharts 柱形图，线条图，饼图组合 Highcharts 组合图 以下实例演示了柱形图，线条图，饼图的组合。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 series 配置 设置 series 的 type 属性为 column/line/pie ，series.type 描述了数据列类型。默认值为 'line'。 var series..
Highcharts 双Y轴, 柱形图，线条图组合 Highcharts 组合图 以下实例演示了双Y轴, 柱形图，线条图组合。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 yAxis 配置 在 yAxis 属性中添加两条Y轴的值 。 var yAxis = [{ // 第一条Y轴 }, { // 第二条Y轴 } }] 实例 文件名：highch..
Highcharts 散点图上添加回归线 Highcharts 组合图 以下实例演示了散点图上添加回归线。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 series 配置 设置 series 的 type 属性为 line/scatter ，series.type 描述了数据列类型。默认值为 'line'。 var series = { t..
Highcharts 组合图 本章节我们将为大家介绍 Highcharts 的组合图。 序号图表类型 1柱形图，线条图，饼图 2双Y轴, 柱形图，线条图 3多Y轴 4散点图上添加回归线..
Highcharts 配置语法 本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置。 第一步：创建 HTML 页面 创建一个 HTML 页面，引入 jQuery 和 Highcharts 库： 文件名：HighchartsTest.htm [mycode4 type='html'] Highcharts 教程 | 菜鸟教程 $(document).ready(func..
Highcharts 动态图 本章节我们将为大家介绍 Highcharts 的动态图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。 每秒更新曲线图 chart.events chart.event 属性中添加 load 方法（图表加载事件）。在 1000 毫秒内随机产生数据点并生成图表。 chart: { events: { load: fu..
Highcharts 测量图 Highcharts 测量图 以下实例演示了测量图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.type 配置 配置 chart 的 type 为 'gauge' 。chart.type 描述了图表类型。默认值为 'line'。 var chart = { type: '..
Highcharts 时钟 Highcharts 测量图 以下实例演示了时钟。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.type 配置 配置 chart 的 type 为 'gauge' 。chart.type 描述了图表类型。默认值为 'line'。 var chart = { type: 'g..
Highcharts 双轴车速表 Highcharts 测量图 以下实例演示了双轴车速表。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.type 配置 配置 chart 的 type 为 'gauge' 。chart.type 描述了图表类型。默认值为 'line'。 var chart = { type: &..
Highcharts 圆形进度条式测量图 Highcharts 测量图 以下实例演示了圆形进度条式测量图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.type 配置 配置 chart 的 type 为 'solidguage' 。chart.type 描述了图表类型。默认值为 'line'。 var chart =..
Highcharts 音量表（VU Meter） Highcharts 测量图 以下实例演示了音量表（VU Meter）。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 chart.type 配置 配置 chart 的 type 为 'gauge' 。chart.type 描述了图表类型。默认值为 'line'。 var char..
Highcharts 热点图 本章节我们将为大家介绍 Highcharts 的热点图。 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。 热点图 chart 配置 配置 chart 的 type 为 'heatmap' 。chart.type 描述了图表类型。默认值为 'line'。 var chart = { ty..
Highcharts 异步加载数据曲线图表 Highcharts 曲线图 以下实例演示了异步加载数据曲线图表。这边我们通过 jQuery.getJSON() 方法从异步加载 csv 文件： 我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看个完整实例： 导入 data.js 文件 异步加载数据需要引入以下js 文件： 配置 X 轴 以每周为间隔设置 X 轴： var xAxis = { ti..