Highcharts学习总结(适合新手小白)


highcharts学习总结(适合新手小白)

highcharts官网学习

第一次写技术博客,先就凑合写一下,以为最近项目中用到highchart进行学习并进行了总结。 首先是去官网了解一下highcharts,附上官网demo链接

highcharts和echarts比较

技术选型比较

我们在做项目的时候会技术选型(如果老板或者甲方指定用哪个那就没办法),目前国内好像最流行的可视化图表工具就echarts和highcharts,也能满足大部分需求。echarts底层为canvas,highcharts底层为svg。

highcharts优点: 1.轻量级,移动端使用比较流畅,毕竟小 2.基于svg,对于动态的增删节点数据非常灵活,不需要重新绘图 3.兼容性好,官方说兼容到IE6。

缺点: 1.第一次上手有点困难 2.商业需要收费 3.官网阅读起来并不友好 highcharts官网地址

echarts优点: 1.不收费 2.国人开发,便于开发和阅读文档。 3.功能丰富,可以满足大部分开发。

缺点: 1.移动端明显卡顿(不建议使用,会吃掉数据,切不美观) 2.节点多的话生成的图标会很模糊(放大) 3.文档有些地方不够详细。 echarts官网地址

底层比较

echarts底层用cavan,也就是cavan底层有优缺点1.依赖分辨率 不支持事件处理器 2.弱的文本渲染能力 3.能够以.jpg、.png格式保存结果图像 4.最适合图像密集型的游戏,其中的许多对象会被频繁重绘

同理,highcharts底层用svg,1.不依赖分辨率 2.支持事件处理器 3.最适合带有大型渲染区域的应用程序(如谷歌地图) 4.复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快) 5.不适合游戏应用

总结

如果你需要一个功能强大、外观精美、交互性强的图表库,那么Highcharts可能更适合你。Highcharts的图表类型丰富,支持多种数据格式,可以满足大部分数据可视化的需求。此外,Highcharts还提供了丰富的API和事件处理机制,方便开发者进行二次开发和定制。
如果你需要一个开源、可定制性强的图表库,那么ECharts可能更适合你。ECharts的图表类型和配置项丰富,支持多种数据格式,可以满足各种数据可视化的需求。此外,ECharts还提供了丰富的文档和示例代码,方便开发者学习和使用。
当然,除了Highcharts和ECharts之外,还有其他的JavaScript图表库可供选择,如D3.js、Chart.js等。这些库各有优缺点,具体选择要根据实际需求和项目要求来决定。
总的来说,选择一个好用的数据可视化图表库需要考虑多个因素,包括功能、外观、交互性、可定制性、社区支持等。因此,在选择之前建议仔细比较不同库的优缺点和适用场景,以便找到最适合自己的数据可视化图表库。

以上纯粹是借鉴别人的话,其实随便看看了解一下就行了,一般技术选型都订好了。

highcharts在项目中的使用

我是直接用vue-highcharts插件直接用在vue3+vite+ts项目中,附上vue-highcharts插件链接,里面有详细的插件安装和注册方法,就不一一说明了。算了,还是说明一下吧

第一、安装

//安装
npm install highcharts-vue

第二步、注册

//全局注册
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
//其他项目代码省略
//vue2用
Vue.use(HighchartsVue)
//vue3用
app.use(HighchartsVue)

//局部注册的话就需要引入指定的组件当中
//若仅用于特定组件,请使用局部注册方法。首先,您应该从组件文件中的 Highcharts-Vue 包中导入 Chart 组件对象:
import {Chart} from ‘highcharts-vue’
//然后,您需要在 Vue 实例配置中注册它,即在 components 部分中
{
components: {
highcharts: Chart
}
}

第三步、配置

1.在自己的vue项目中需要用到图表的vue文件添加 元素,并且必须通过它的 :options 参数传递图表配置对象


js代码

//这是vue2中
new Vue({
    data() {
        return {
            chartOptions: {
                series: [{
                    data: [1, 2, 3] // sample data
                }]
            }
        }
    }
})
//这是vue3中
import { ref } from "vue"
const chartOptions = ref({
    chart: {
        type: 'spline',
        backgroundColor: '#0b1c2e',
        // width:400,
        height: 220
    },
    title: {
        text: null
    },
    xAxis: {},
    yAxis: {},
    plotOptions: {},
    tooltip: {},
    legend: {},
    credits: {
        enabled: false
    },
    series: []
})

第四步、自己在使用过程中遇到的一些问题或者小坑

我们在使用图表的时候可以查看官方文档deno,基本的图表都是可以直接用vue-highcharts插件实现的,但是使用其他额外的图表或者地图的时候需要额外引入第三方库,例如我就是在使用金字塔三角pyramid和可变半径饼图variablepie的时候额外引入了第三方库,如下示例,(这个是要看官方demo示例那边的js代码引入什么库我们这边就引入什么库)

import { createApp } from 'vue'
import App from './App.vue'
//引入highcharts
import HighchartsVue from 'highcharts-vue';
import Highcharts from "highcharts"; 
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import funnel from "highcharts/modules/funnel";
import variablepie from 'highcharts/modules/variable-pie'
import funnel3d from "highcharts/modules/funnel3d";
import cylinder from "highcharts/modules/cylinder";
import pyramid3d from "highcharts/modules/pyramid3d";
import exportingInit from 'highcharts/modules/exporting' 
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';

并且个人在项目过程中遇到一个问题,是有关于npmpnpm的问题,因为我是vue3+vie安装的项目,所有用的包管理器也是pnpm,用npm安装的时候安装vue-highcharts可以直接安装vue-highchartshighcharts两个插件的,但是用pnpm的话只能安装vue-highcharts一个插件,后续引入第三方库是要从highcharts插件中引入的,所以需要自己手动安装highcharts组件。

highcharts的一些基本概念和项目中的配置(重要)

基本概念和配置

首先我们要了解highcharts的一些基本常用的几大属性

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

title(标题配置)

标题其实不用多说,就是图表的标题没啥很细的东西,文档里面也有

charts(图表配置)

charts里面最重要的是type,它指定了图表的类型是折线图还是曲线图还是柱状图还是饼图,然后可以给图表设置样式宽高背景颜色等等,图表样式属性包括 border、backgroundColor、margin、spacing、style等,注意这些是同一级别,width,height不写在style里面

  • 边框:包括 borderColor、borderRadius、borderWidth
  • 背景:包括 backgroundColor
  • 外边距:包括 margin、marginTop、marginRight、marginBottom、marginLeft
  • 内边距:包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
  • 其他样式:其他属性例如字体等属性,示例代码
chart: {
    type: 'spline',
    backgroundColor: '#0b1c2e',
    width:400,
    height: 220
    style: {
        fontFamily: "",
        fontSize: '12px',
        fontWeight: 'bold',
        color: '#006cee'
    }
}

Axis(坐标轴配置)

笛卡尔图表(普通的二维数据图)都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调。 坐标轴主要有categories(里面是坐标轴数据)、title(坐标轴标题)、labels(坐标轴刻度标签)、 crosshair(十字准星)、gridLine(坐标轴网格线)。

label又是比较重要的,有很多属性,enable可以设置true和false(默认true显示),当为false时,x轴和y轴上的刻度文子就不会显示,当为true时可以设置文字的样式用style对象设置,还有rotation属性可以调节坐标刻度上面字体的倾斜度,tickInterval属性可以调整刻度值间隔

crosshair十字准星是鼠标放到表格上去的话,会有一条柱状体,用于看数据更加容易(我在项目配置的时候发现,一般只要开启即可,不用做过多的配置),如果想改变样式可以参考文章https://juejin.cn/post/7203638374547308601

minmaxtickInterval可以搭配使用,这三个属性一般用来设置刻度,设置你最小和最大以及每个刻度间隔多少,这样x轴和y轴上的刻度就是平均的了

gridLineWidthgridLineColorgridLineDashStyle这三个是设置坐标轴网格线样式的,gridLineDashStyle设置网格线线条样式,和Css border-style类似,常用的有:SolidDotDashgridLineWidthgridLineColor分别设置网格线宽度和颜色 坐标轴配置示例代码

 xAxis: {
        categories: ['今日', '本月', '本季度', '上季度', '全年'],
        title: {
            text: null
        },
        crosshair:true,
   crosshairs: true          // 启用竖直方向准星线

  crosshairs: [true, true]  // 同时启用竖直及水平准星线

  crosshairs: [{            // 设置准星线样式
     width: 3,
    color: 'green'
    }, {
    width: 1,
    color: "#006cee",
    dashStyle: 'longdashdot',
    zIndex: 100 
   }]

    labels: {
        style: {
            color: '#919191',
            fontSize: "12px"
        }
    }
},

yAxis: {
    categories: ['0', '200', '400', '600', '800', '1000'],
    title: {
        text: null
    },
    labels: {
        // enabled: false,
        style: {
            color: '#919191',
            fontSize: "12px"
        }
    },
    gridLineDashStyle: 'ShortDash',//网格线样式
    gridLineColor:'rgb(64,64,64)',
    min:0 ,//最小值

tickInterval:200, //间隔
max:1000 //最大值
},

tooltip(数据提示框配置)

数据提示框指的当鼠标悬停在某点上时,以框的形式提示该点的数据,比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定;通过设置 tooltip.enabled = false 即可不启用提示框。

数据提示框有以下属性backgroundColorborderColorborderRadiusborderWidthshadowanimation以上分别是设置提示框背景颜色、边框颜色、边框圆角、边框宽度、是否有阴影、是否开启动画,在项目中发现给边框设置宽高没用,还有一个属性padding,我们可以通过改变padding的大小从而改变数据提示框宽高。

还有两个属性也比较重要,pointFormatheaderFormat,可以设置单个点的格式化字符串和数据提示框头部格式化字符,这两个属性也可以直接使用函数pointFormatter实现,对比下 pointFormatter 和 pointFormat 我们可以知道两两种方式的差别:

  • pointFormat 更简单,适用于简单的内容格式化
  • pointFormatter 更灵活,适用于相对复杂的自定义内容

上述两个观点也就是格式化函数和格式化字符串的优缺点,在使用的时候,请灵活运用。我个人喜欢用字符串,字符串里面可以用html模板

当我们在一个图表中特别是柱状图中有可能要显示两个或多个柱子进行对比,这个时候要把两个数据显示在一个提示框中方便对比也更加美观,可以设置shared属性,默认为false,设置为true时,两条数据或多条数据就在以亲显示了,并且我们可以通过pointFormat设置显示的样式。示例代码

 tooltip: {
        // enable:false,
        shared: true,
        padding:16,
        headerFormat: '{point.key}
', style: { color: 'rgb(124,124,124)',
    },
    pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b>&nbsp;&nbsp;&nbsp;&nbsp; {point.y} <br>'
},

legend(图例配置)

图例是图表中用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列;通过设置 legend.enabled = true | false 来打开或关闭图例。

图例有以下属性layoutalignverticalAlign这三个分别表示如下,layout表示图例的布局方式,有horizontal(水平)和vertical(垂直);align表示图例在选择垂直或水平布局之后的对齐方式,有left(左侧对齐)、center(中间对齐)、right(右侧对齐);verticalAlign表示在设置垂直排列之后,图例整体垂直对齐方式,有topmiddlebottom。图例整体还有很多样式可以配置(一般不需要)如backgroundColorborderColorshadowwidth等等 可以给每一项设置样式用itemStyle,里面有color、cursor,我们一般就给图例设置文字颜色用color示例代码

legend: {
        enabled:true,
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        symbolHeight:14,
        symbolWidth:20,
        symbolRadius:0,
        itemStyle:{'color':'#FFFFFF'}
    },

plotOptions(数据点配置)

plotOption好像有两种写法,一种是写series对象,里面写属性,另一种是,写具体某种图表类型然后写属性,我一般是写第二种,写图表类型里面写属性,属性有dataLabelsdataLabels可以设置数据点,用enable可以控制显示与隐藏、用color设置字体颜色、用style设置字体样式。

此外还有borderRadiusborderColorgroupPadding这三个属性可以设置边框的圆角、边框颜色、每个边框内边距,我们一般用于柱状图的设置,设置borderColor为空的话外边框的白色阴影就会被去掉。示例代码

//图表类型写法
 plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,   //是否在图表上各个数据点显示对应数据
                color: 'rgb(63,149,166)',
                style: {
                    fontSize: "12px",
                }
            },
            borderRadius: '0',
            borderColor: '',//去边框
            groupPadding: 0.1
        },
    },
//series数据列写法
series: {
            marker: {
                enabled: true   //是否显示折线图上的点(折线图配置)
            },
            dataLabels: {
                enabled: false,  //是否在图表上各个数据点显示对应数据
                color: 'rgb(63,149,166)',
                formatter: function () {//格式化
                    return this.y;
                }
            },
            borderRadius: '0',
            borderColor: '',//去边框
            groupPadding: 0.1
        },

series(数据列)

数据列是一组数据集合,例如一条线,一组柱形等。图表中所有点的数据都来自数据列对象,数据列的基本构造是:

series : [{
    name : '',
    data : []
}] 

提示:数据列配置是个数组,也就是数据配置可以包含多个数据列。

数据列中的 name 代表数据列的名字,并且会显示在数据提示框(Tooltip)及图例(Legend)中。 在数据列的 data 属性中,我们可以定义图表的数据数组,通常有三种定义方式(一般都用第三种):

1、数值数组。在这种情况下,配置数组中的数值代表 Y 值,X 值则根据 X 轴的配置,要么自动计算,要么从 0 起自增,或者是根据 pointStart 及 pointInterval 自增;在分类轴中, X 值就是 categoies 配置,数值数组配置实例如下:

data : [1, 4, 6, 9, 10] 

2、包含两个值的数组集合。在这种情况下,集合中数组的第一个值代表 X, 第二个值代表 Y;如果第一个值是字符串,则代表该点的名字,并且 X 值会如 1 中所说的情况决定。数组集合的实例:

data : [ [5, 2], [6,3], [8,2] ]

3、数据点对象集合。在这种情况下,集合中元素都是数据点对象,对象中可以配置数据见 plotOptions.series 或 plotOptions.{图表类型} 所列。示例代码

//柱状图和折线图
  series: [{
        type:'column',
        name: '数据一',
        data: [100,140,200,100,130],
        color: 'rgb(80,135,236)',
        pointPadding: 0.1,
        groupPadding: 0.2,
        // borderRadiusTopLeft: 100,
        // borderRadiusTopRight: 100,
}, {
    type:'line',
    name: '数据二',
    data: [150,100,230,140,130],
    color: 'rgb(114,205,215)',
}
]

//饼图
data: [{
name: ‘数据一’,
y: 40,
z: 220,
color: ‘rgb(88,148,255)’,
}, {
name: ‘数据二’,
y: 32,
z: 130,
color: ‘rgb(114,205,215)’,
}, {
name: ‘数据三’,
y: 28,
z: 100,
color: ‘rgb(88,165,92)’,
}],

其实我们把一些配置写在plotOptions里面的话,这里配置就比较简单了

credits(版权信息)exporting(导出按钮)

这两个不用多说,版权信息一般设置false,导出按钮也设置false,不设置的话默认显示

个人项目中图表配置示例代码

1.折线图

image.png


2.柱状图

image.png


3.条形图柱状图结合

image.png


4.饼图

image.png


5.金字塔

image.png