一文带你快速上手Highcharts框架

已于 2023-05-24 17:05:25 修改
阅读量5.4k 收藏 77
点赞数 11
分类专栏： Highcharts 文章标签： 前端 Highcharts
于 2022-04-28 18:00:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shids_/article/details/124466962
版权

前言

前端开发中，数据可视化尤为重要，最有效的方式可以通过图表库进行数据可视化，其中 ECharts、Highcharts 提供了丰富的图表，适用各种各样的功能，ECharts 相对来说基本可满足日常使用。但如果你的需求是立体 3D 图表时，ECharts 就显得力不从心了，这个时候 Highcharts 的优势就体现出来了。

Highcharts概述

Highcharts（官网） 是一个用纯 JavaScript 编写的一个图表库。它能够很简单便捷的在 web 网站或是 web 应用程序添加有交互性的图表。

一、安装

通过npm安装

npm install highcharts --save
npm install highcharts-vue

Highcharts Vue 是 Highcharts 基于 Vue 框架封装的 Highcharts，可以很方便的在 Vue 开发环境中使用 Highcharts 创建交互性图表。

main.js 中全局引入并注册

import Highcharts from 'highcharts'
import HighchartsVue from 'highcharts-vue'
Vue.use(Highcharts)
Vue.use(HighchartsVue)

二、Highcharts 图表组成

一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。

Highcharts 基本组成部分如下图所示：

在这里插入图片描述

三、生成一个 Highcharts

1. 为 Highcharts 准备一个具有宽高的div容器（简单来说就是存放图表的一个占位）

  <div :style="{ width: '100%', height: '500px' }" id="cookieChart"></div>

2. Highcharts 实例化中绑定容器

Highcharts.chart('cookieChart', {
  // Highcharts 配置
});

当你想愉快的开始使用 Highcharts 时，你会发现页面报了这个错误：在这里插入图片描述
解决： 只需要在页面上再次将 Highcharts 引入即可。

import Highcharts from "highcharts";

四、实例

介于大家用 Highcharts 图表工具可能更趋向于其中的3D图表，所以我们直接看具有3D效果的图表。平面图表大家可参考博主另一篇文章 ----- 史上最全echarts可视化图表详解 。

1. 金字塔图（3D）

金字塔图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述
源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="cookieChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
import funnel3d from "highcharts/modules/funnel3d";
import cylinder from "highcharts/modules/cylinder";
import pyramid3d from "highcharts/modules/pyramid3d";
// 注册所需外部资源
Highcharts3d(Highcharts);
funnel3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
cylinder(Highcharts);
pyramid3d(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 435,
        },
        {
          name: "数据二",
          y: 435,
        },
        {
          name: "数据三",
          y: 543,
        },
        {
          name: "数据四",
          y: 654,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("cookieChart", {
        chart: {
          type: "pyramid3d", //图表类型
          options3d: {
            enabled: true, // 是否启用 3D 功能,默认为false
            alpha: 10, // 内旋转角度
            depth: 50, // 外旋转角度
            viewDistance: 50,
          },
        },
        title: {
          text: "标题", //标题
        },
        plotOptions: {
          series: {
            dataLabels: {
              //数据标签
              enabled: true, //是否默认显示数据项
              format: "<b>{point.name}</b>", //通过format函数对当前数据点的点值格式化
              allowOverlap: true,
              x: 10, //数据项x轴方向调整
              y: -5, //数据项y轴方向调整
            },
            width: "50%", //图表宽
            height: "50%", //图表宽
            center: ["50%", "40%"], //图表位置，左右、上下
          },
        },
        series: [
          // 数据列
          {
            name: "数量", //名称
            data: this.dataList, //数据
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

2. 饼图（3D）

饼图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述
源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pieChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 435,
        },
        {
          name: "数据二",
          y: 435,
        },
        {
          name: "数据三",
          y: 543,
        },
        {
          name: "数据四",
          y: 654,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pieChart", {
        chart: {
          type: "pie",//类型
          options3d: {
            enabled: true, // 是否启用 3D 功能,默认为false
            alpha: 45,// 内旋转角度
            beta: 0, // 外旋转角度
          },
        },
        title: {
          text: "标题",//标题
        },
        tooltip: {//鼠标触摸显示值
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,//是否允许数据点的点击
            cursor: "pointer",//鼠标触摸变小手
            depth: 35,//图表高度
            dataLabels: {
              enabled: true,//是否允许数据标签
              format: "{point.name}",
            },
          },
        },
        series: [
           // 数据列
          {
            type: "pie",//类型
            name: "占比", //名称
            data: this.dataList, //数据
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

3. 柱图（3D）

柱图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述

源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 435,
        },
        {
          name: "数据二",
          y: 435,
        },
        {
          name: "数据三",
          y: 543,
        },
        {
          name: "数据四",
          y: 321,
        },
        {
          name: "数据五",
          y: 112,
        },
        {
          name: "数据六",
          y: 214,
        },
        {
          name: "数据七",
          y: 432,
        },
        {
          name: "数据八",
          y: 644,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          renderTo: "pillarChart", //图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值
          type: "column", //类型
          options3d: {
            enabled: true,// 是否启用 3D 功能,默认为false
            alpha: 15, // 内旋转角度
            beta: 15, // 外旋转角度
            depth: 100, //3D场景的大小(深度)
            viewDistance: 25,
          },
        },
        title: {
          text: "标题", //标题
        },
        subtitle: {
          text: "副标题", //副标题
        },
        yAxis: {
          title: {
            text: "y轴标题", //左侧标题
          },
        },
        xAxis: {
          title: {
            text: "x轴标题",//x轴标题
          },
          // 数据项
          categories: ["x轴1","x轴2","x轴3","x轴4","x轴5","x轴6","x轴7","x轴8"],//x轴数据
        },
        plotOptions: {
          column: {
            depth: 25, //柱子的横截面宽度
          },
        },
        series: [
          {
            name: "图例1", //名称
            data: this.dataList, //数据
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

4. 面积图（3D）

面积图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：

在这里插入图片描述

源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 51,
        },
        {
          name: "数据二",
          y: 51,
        },
        {
          name: "数据三",
          y: 32,
        },
        {
          name: "数据四",
          y: 31,
        },
        {
          name: "数据五",
          y: 22,
        },
        {
          name: "数据六",
          y: 24,
        },
        {
          name: "数据七",
          y: 32,
        },
        {
          name: "数据八",
          y: 34,
        },
      ],
      dataListTwo: [
        {
          name: "数据一",
          y: 87,
        },
        {
          name: "数据二",
          y: 86,
        },
        {
          name: "数据三",
          y: 90,
        },
        {
          name: "数据四",
          y: 96,
        },
        {
          name: "数据五",
          y: 86,
        },
        {
          name: "数据六",
          y: 81,
        },
        {
          name: "数据七",
          y: 82,
        },
        {
          name: "数据八",
          y: 88,
        },
      ],
      dataListTherr: [
        {
          name: "数据一",
          y: 123,
        },
        {
          name: "数据二",
          y: 144,
        },
        {
          name: "数据三",
          y: 113,
        },
        {
          name: "数据四",
          y: 131,
        },
        {
          name: "数据五",
          y: 112,
        },
        {
          name: "数据六",
          y: 134,
        },
        {
          name: "数据七",
          y: 132,
        },
        {
          name: "数据八",
          y: 164,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          type: "area", //类型
          options3d: {
            enabled: true,// 是否启用 3D 功能,默认为false
            alpha: 15, // 内旋转角度
            beta: 30,// 外旋转角度
            depth: 200,//3D场景的大小(深度)
          },
        },
        title: {
          text: "标题", //标题
        },
        yAxis: {
          title: {
            text: "y轴标题",
            x: -40, //x方向
          },
          labels: {
            //图例
            format: "{value:,.0f} ml",
          },
          gridLineDashStyle: "Dash",//网格线线条样式，Solid、Dot、Dash
        },
        xAxis: [
          {
            visible: false,//加载时，数据序列默认隐藏。
          },
          {
            visible: false,//加载时，数据序列默认隐藏。
          },
          {
            visible: false,//加载时，数据序列默认隐藏。
          },
        ],
        plotOptions: {
          area: {
            depth: 100,
            marker: {
              enabled: false,
            },
            states: {
              inactive: {
                enabled: false,
              },
            },
          },
        },
        tooltip: {
          valueSuffix: "ml", //提示框内容拼接的文字
        },
        series: [
          {
            name: "数据一", //名称
            lineColor: "rgb(180,90,50)", //线条颜色
            color: "rgb(200,110,50)", //文字颜色
            fillColor: "rgb(200,110,50)", //背景色
            data: this.dataList, //数据
          },
          {
            name: "数据四",
            xAxis: 1,
            lineColor: "rgb(120,160,180)",
            color: "rgb(140,180,200)",
            fillColor: "rgb(140,180,200)",
            data: this.dataListTwo,
          },
          {
            name: "数据三",
            xAxis: 2,
            lineColor: "rgb(200, 190, 140)",
            color: "rgb(200, 190, 140)",
            fillColor: "rgb(230, 220, 180)",
            data: this.dataListTherr,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

5. 圆柱图（3D）

圆柱图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述
实现效果：
在这里插入图片描述
源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
import cylinder from "highcharts/modules/cylinder";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
cylinder(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "数据一",
          y: 51,
        },
        {
          name: "数据二",
          y: 51,
        },
        {
          name: "数据三",
          y: 32,
        },
        {
          name: "数据四",
          y: 31,
        },
        {
          name: "数据五",
          y: 22,
        },
        {
          name: "数据六",
          y: 24,
        },
        {
          name: "数据七",
          y: 32,
        },
        {
          name: "数据八",
          y: 34,
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          type: "cylinder",//类型
          options3d: {
            enabled: true,// 是否启用 3D 功能,默认为false
            alpha: 15,// 内旋转角度
            beta: 15,// 外旋转角度
            depth: 50,//3D场景的大小(深度)
            viewDistance: 25,
          },
        },
         yAxis: {
          title: {
            text: "y轴标题",
            x: -40, //x方向
          },
         },
         xAxis:{
           title: {
            text: "x轴标题",//x轴标题
          },
          // 数据项
          categories: ["x轴1","x轴2","x轴3","x轴4","x轴5","x轴6","x轴7","x轴8"],//x轴数据
         },
        title: {
          text: "标题",
        },
        plotOptions: {
          series: {
            depth: 25,//柱子所在位置(深度)
            colorByPoint: true,//随机颜色
          },
        },
        series: [
          {
            data: this.dataList,//数据
            name: "名称",
            showInLegend: false,//是否显示图例
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

6. 散点图 （3D）

散点图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述

源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import oldie from "highcharts/modules/oldie";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
oldie(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList:[[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4]],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          renderTo: "pillarChart", //图表放置的容器，一般在html中放置一个DIV，获取DIV的id属性值
          margin: 100,
          type: "scatter",//类型
          options3d: {
            enabled: true,// 是否启用 3D 功能,默认为false
            alpha: 10,// 内旋转角度
            beta: 30,// 外旋转角度
            depth: 250,//3D场景的大小(深度)
            viewDistance: 5,
            frame: {
              // 背景三个面的颜色
              bottom: { size: 1, color: "rgba(0,0,0,0.02)" },
              back: { size: 1, color: "rgba(0,0,0,0.04)" },
              side: { size: 1, color: "rgba(0,0,0,0.06)" },
            },
          },
        },
        title: {
          text: "标题",
        },
        subtitle: {
          text: "副标题", //副标题
        },
        plotOptions: {
          scatter: {
            width: 10, //宽
            height: 10, //高
            depth: 10,//3D场景的大小(深度)
          },
        },
        yAxis: {
          title: "y轴标题",//y轴标题
        },
        xAxis:{
           title: {
            text: "x轴标题",//x轴标题
          },
          // 数据项
          categories: ["x轴1","x轴2","x轴3","x轴4","x轴5","x轴6","x轴7","x轴8"],//x轴数据
         },
        zAxis: {
          min: 0, // z轴最小值
          max: 100, // z轴最大值
        },
        legend: {
          enabled: false,//图例显示
        },
        series: [
          {
            name: "随机数据",//名称
            colorByPoint: true,//随机颜色
            data: this.dataList,//数据
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

7. 堆叠柱图 （3D）

堆叠柱图所需的外部资源，在页面引入并注册即可。
在这里插入图片描述

实现效果：
在这里插入图片描述

源码如下：

<template>
  <!-- //用来放Highcharts图表的容器，一定要有宽高 -->
  <div class="ChartBox">
    <div :style="{ width: '100%', height: '100%' }" id="pillarChart"></div>
  </div>
</template>
<script>
import Highcharts from "highcharts"; //为防止报错在页面上再次引入Highcharts
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
// 注册所需外部资源
Highcharts3d(Highcharts);
exporting(Highcharts);
export default {
  data() {
    return {
      // 模拟数据
      dataList: [
        {
          name: "小张",
          data: [5, 3, 4, 7, 2],
        },
        {
          name: "小王",
          data: [3, 4, 4, 2, 5],
        },
        {
          name: "小彭",
          data: [2, 5, 6, 2, 1],
        },
        {
          name: "小潘",
          data: [3, 0, 4, 4, 3],
        },
      ],
    };
  },
  mounted() {
    this.init(); //定义一个图表方法在methods中调用
  },
  methods: {
    // 调用init方法
    init() {
      Highcharts.chart("pillarChart", {
        chart: {
          type: "column", //类型
          options3d: {
            enabled: true, // 是否启用 3D 功能,默认为false
            alpha: 15, // 内旋转角度
            beta: 15, // 外旋转角度
            depth: 40, //3D场景的大小(深度)
            viewDistance: 25,
          },
          marginTop: 80, //图表距离顶部间距
          marginRight: 40, //图表距离右边间距
        },
        title: {
          text: "标题", //标题
        },
        xAxis: {
          categories: ["x轴1", "x轴2", "x轴3", "x轴4", "x轴5"],
        },
        yAxis: {
          min: 0, //最小值为0
          allowDecimals: false,
          title: {
            text: "y轴标题",
          },
        },
        tooltip: {
          // 鼠标触摸显示
          headerFormat: "<b>{point.key}</b><br>",
          pointFormat:
            '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}',
        },
        plotOptions: {
          column: {
            stacking: "normal", //堆叠,禁止堆叠设置null
            depth: 40, //柱子横截面宽度
          },
        },
        series: this.dataList, //数据
      });
    },
  },
};
</script>
<style scoped>
.ChartBox {
  width: 50em;
  height: 50vh;
}
</style>

五、常用配置项

看完以上几个实例，相信你对 Highcharts 图表更加得心应手了，但是在使用 Highcharts 图表的时候避免不了要修改一些官方的配置，下面这些配置你一定会用到，一起往下看吧。

1.去掉右下角官方logo

credits: {
  enabled: false,
  //href: "http://www.hcharts.cn", //自定义链接
  //text:"", //自定义内容
},

在这里插入图片描述

2.去掉右上角导出

exporting: {
  enabled: false,
},

在这里插入图片描述

3.图例在图表中上方显示

legend: {
  layout: "vertical", // 布局类型：horizontal、vertical，即水平布局和垂直布局
  align: "right", // 水平对齐方式，left、center、right。
  verticalAlign: "top", // 垂直对齐标准
  itemMarginTop: 5, // 图例项顶部外边距
  itemMarginBottom: 3, // 图例项底部外边距
  floating: true, // 是否浮动，浮动则在图表中显示图例
},

在这里插入图片描述

4.设置导出信息为中文

lang: {
  viewFullscreen: "全屏",
  contextButtonTitle: "图表导出菜单",
  decimalPoint: ".",
  downloadJPEG: "下载JPEG图片",
  downloadPDF: "下载PDF文件",
  downloadPNG: "下载PNG文件",
  downloadSVG: "下载SVG文件",
  printChart: "打印图表",
},

调整前：
在这里插入图片描述
调整后：
在这里插入图片描述

5.去掉背景网格线

yAxis: {
  gridLineWidth: 0,
  minorGridLineWidth: 0,
},

在这里插入图片描述

6.文字倾斜

xAxis: {
  labels: {
    rotation: -90, //竖直放
    rotation: -45, //45度倾斜
  },
},

在这里插入图片描述

7.数据直接显示在柱体上

series: [
  {
    dataLabels: {
      enabled: true,
      rotation: -90,
      color: "#FFFFFF",
      align: "right",
      format: "{point.y:.1f}", // :.1f 为保留 1 位小数
      y: 10,
    },
  },
],

在这里插入图片描述

8.设置柱体的宽度

plotOptions: {
  column: {
    pointWidth: 30, //设置柱形的宽度
    borderWidth: 1, //设置柱子的边框，默认是1
  },
},

在这里插入图片描述

9.设置背景网格线颜色、宽度

yAxis: {
  gridLineColor: "red",
  gridLineWidth: "10",
},

在这里插入图片描述

10.折现图线条设置平滑

yAxis: {
  type:'spline',
},

在这里插入图片描述

11.去掉饼图外部文字带白边

plotOptions: {
  pie: {
    dataLabels: {
      format: "{point.name}",
      style: {
        textOutline: "none",//去掉白边
      },
    },
  },
},

在这里插入图片描述

12.饼图字体颜色跟饼图颜色一致

plotOptions: {
  pie: {
    dataLabels: {
      formatter: function () {//饼图字体颜色跟饼图颜色一致
        return (
          '<p style="color:' +
          this.color +
          '">' +
          this.point.name +
          '</p><br><p style="color:' +
          this.color +
          '">' +
          this.percentage.toFixed(1) +
          "%</p>"
        );
      },
    },
  },
},

在这里插入图片描述

此文章持续更新中…

水星记_
关注
  • 11
    点赞
  • 踩
  • 77
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
专栏目录
Highcharts使用指南
weixin_34037515的博客
01-24 813
摘要 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。   目录 前言（Preface） 安装（Installation） 如何设置参数（How to set up the options） 预处理参数（Preprocess th...
Highcharts框架js包
06-20
这个"Highcharts框架js包"包含了实现各种图表功能所需的所有资源，使得开发者能够轻松地在网页中集成高质量的图表。 首先，我们来看一下压缩包中的文件结构： 1. **index.htm** - 这通常是示例或者演示页面，它...
2024年前端最新Vue：使用highCharts(1)，web前端界面开发工具
2401_84418883的博客
05-13 586
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】},data() {return {},// 请求数据},return {chart: {style: { // 配置翻页颜色},
hicharts 横向滚动条例子
12-31
1分评价后就返回了,就是个小例子！hicharts 柱状图添加横向滚动条
推荐使用 Vue2-Highcharts：Vue 与 Highcharts 的完美结合
最新发布
gitblog_00051的博客
06-26 371
推荐使用 Vue2-Highcharts：Vue 与 Highcharts 的完美结合 项目地址:https://gitcode.com/superman66/vue-highcharts 项目介绍 vue-highcharts 是一款专为 Vue 2.0 设计的组件库，它无缝对接了强大的图表库 Highcharts，让你能在 Vue 应用中轻松绘制各种精美图表。想要查看项目演示？直接访问 Dem...
HighCharts结构及详细配置(中文对比)
AndyWangWangWang的博客
02-02 1475
HighCharts结构及详细配置(中文对比翻译)
ECharts 对比 Highcharts 使用教程
leva的博客
02-07 1631
Highcharts是用JavaScript编写的图表库，支持各种常用的可视化。作为同类可视化产品，ECharts与Highcharts的对比如下。
【Web】前端Highcharts各种图形 示例
热门推荐
沙师弟专栏
04-03 1万+
最近项目的需要，看了下前端的框架。想要在Web网页上，做折线图，柱形图等。查了一些开源的项目，发现Highcharts框架还是很好用，于是做了一个小示例，供大家共同学习。Highcharts的官网：https://www.highcharts.com/Highcharts的官网的api文档：https://api.hcharts.cn/Highcharts是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。
使用Highcharts快速开发报表中文WORD版
07-22
资源名称：使用Highcharts快速开发报表 中文WORD版内容简介：Highcharts是一个纯Javaｓｃｒｉｐｔ编写的图表库，它提供了一个将交互式的图表添加到您的网站或Web应用程序的简单方法。 Highcharts目前支持折线图，...
NFine快速开发框架.rar
05-22
框架使用场景：OA、ERP、BPM、CRM、WMS、TMS、MIS等业务管理系统及后台系统 框架主要运用技术： 1、前端技术 JS框架：jquery-2.1.1、Bootstrap.js、JQuery UI CSS框架：Bootstrap v3.3.4（稳定是后台，UI方面根据...
highcharts快速生成百万数据点折线图.rar
12-15
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种动态、交互式的图表，包括折线图、柱状图、饼图等多种类型。在处理大数据量时，Highcharts提供了高效的优化策略，使得即使...
Highcharts
06-14
Highcharts是一款强大的JavaScript图表库...在下载的Highcharts-6.1压缩包中，你将找到不同版本和语言的资源，包括文档、示例代码以及必要的JavaScript和CSS文件，这将帮助你快速上手并开始创建自己的数据可视化应用。
HighCharts详情总结
m0_61419412的博客
12-27 1179
HighCharts中文网：http://www.hcharts.cn/ HighCharts官网：http://www.highcharts.com/download HighCharts入门 一、什么是HighCharts 1、HighCharts是网页报表工具，开发语言是Javascript 2、HighCharts是一个简单易用、美观、跨平台、跨浏览器的图表工具 3、HighCharts支持图表的类型有：曲线图、柱状图、饼状图、区域图、散点图、综合图的各种图表需求。 直线图——line 折线图——s
vue使用Highcharts图表
shykevin的博客
05-31 4774
一、概述 Highcharts 是一个制作图表的纯 Javascript 类库，主要特性如下： 兼容性：兼容当今所有的浏览器，包括 iPhone、IE 和火狐等等； 对个人用户完全免费； 纯 JS，无 BS； 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼状图、散布图； 跨语言：不管是 PHP、Asp.net 还是 Java 都可以使用，它只需要三个文件...
Highcharts简介
hellorichen的专栏
05-20 830
1、纯js编写，优点如下： ①兼容、多设备。浏览器、手机 ②免费 ③轻量。highcharts.js内核库大小仅有35KB左右。 2、Highcharts依赖于jQuery，所以在加载Highcharts前必须先加载jQuery库。 3、环境配置 安装jQuery和highcharts，均包括在线和静态两种配置方式。 推荐：CDN方式 4、 参考： ht
【Highcharts 介绍】
08-05 211
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。   HighCharts的主要特性包括： 1.兼容性：HighCharts采用纯JavaScript编写，兼容当今...
快速了解上手Highcharts
小刘不吃肉肉
07-23 186
产品介绍 Highcharts系列软件包含 Highcharts JS,Highstock JS,Highmaps JS 共三款软件，均为纯Javascript编写得HTML5图标库。 Highcharts 概念：Highcharts是一个用纯 Javascript编写的一个图标库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表。（直线图，曲线图，区域图，柱状图，饼状图，散状点图，仪表图，旗袍图，瀑布流图等多达20多种图表，其中很多图表可以集成在同一个图行中形成混合图） 获取Hig
Highcharts简单小示例，15秒了解图解
IT_hot_pot的博客
01-04 403
Highcharts 简介 Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web 网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站 和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、 饼状图、散状点图和综合图表 特点 HighCharts的主要特性包括： 1.兼容性： HighCharts采...
vue highcharts使用
IT_iosers的博客
02-04 1506
1、安装 highcharts npm install highcharts --save 2、安装highcharts-vue npm install highcharts-vue 3、在main中引入 import HighchartsVue from 'highcharts-vue' Vue.use(HighchartsVue) 4、使用 html代码 <highcharts :options="chartOptions"></highcharts> data中的数据
highcharts的render
07-29
回答: Highcharts的render是指将Highcharts图表渲染到指定的DOM元素上。在使用Highcharts时，可以通过构建图表选项对象来定义图表的样式和数据，然后使用render方法将图表渲染到指定的DOM元素上。具体的实现方式可以参考Highcharts的官方文档和示例代码。\[1\]在使用Highcharts时，如果遇到页面报错的情况，可以尝试重新引入Highcharts库来解决问题。\[2\]另外，一个更好的实践是通过字典构建图表选项对象，然后使用set_dict_options函数来输入选项。\[3\]这样可以更方便地定义和修改图表的样式和数据。 #### 引用[.reference_title] - *1* *2* [一文带你快速上手Highcharts框架](https://blog.csdn.net/Shids_/article/details/124466962)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [python-highcharts: A simple translation layer between Python and Javascript for Highcharts projects ...](https://blog.csdn.net/weixin_42312133/article/details/116190450)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值