Highcharts实现下钻多柱series

钻取功能需要引入或注册额外的功能模块，链接是官方模块的引入文档。

前言

Highcharts实现下钻动态添加多个series

实现

<template><divref="chartRef"style="height:300px;width:800px"></div>
</template><script>
import Highcharts from "highcharts";
import HighchartsDrilldown from "highcharts/modules/drilldown";
HighchartsDrilldown(Highcharts);import { onMounted, ref } from "vue";export default {components: {},props: {},setup() {const chartRef = ref(null);onMounted(() => {initChart();});function initChart() {let chart = Highcharts.chart(chartRef.value, {credits: {enabled: false,},chart: {type: "column",events: {drilldown: async function (e) {// const drilldownId = e.point.drilldown // 可根据drilldownId 找到你要下钻的数据， 此处demo直接用模拟数据let area = {name: "10月面积",id: 10,color: "#F56C6C",data: [{name: "1",y: 100,},{name: "2",y: 200,},{name: "3",y: 400,},],};chart.addSingleSeriesAsDrilldown(e.point, area);let passArea = {name: "10月合格面积",id: 10,color: "#42b983",data: [{name: "1",y: 70,},{name: "2",y: 90,},{name: "3",y: 200,},],};chart.addSingleSeriesAsDrilldown(e.point, passArea);chart.applyDrilldown();},},},legend: {verticalAlign: "top",},title: {text: null,},subtitle: {text: "单击列,展示更多详细信息",},xAxis: {type: "category",crosshair: true,},yAxis: {title: {text: "面积",},},series: [{name: "面积",data: [{name: "10月",y: 1231,drilldown: 10,},],color: "#F56C6C",},{name: "合格面积",data: [{name: "10月",y: 443,drilldown: 10,},],color: "#42b983",},],drilldown: {drillUpButton: {position: {y: -32,},},},});chart.options.lang.drillUpText = "◁ Back";}return {chartRef,};},
};
</script>

效果

动画没录入

Highcharts实现下钻多柱series相关推荐

java highchart统计图_java+highchart实现分类下钻柱形图
可视化展示中, 向下钻取的功能很常见. 这是有必要掌握的技能之一. 首先看官方示例. 第一层点击第一个柱子向下钻取实现这种图形展示, 关键点和难点在于数据格式的准备上. 通过查看示例代码, 可以看 ...
html5饼图颜色渐变,Highcharts 渐变饼图
Highcharts 渐变饼图以下实例演示了渐变饼图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置. 配置 colors 配置使用 Highcha ...
分享个轮播的3D饼图，分别用Echarts和HighCharts实现
轮播的3D饼图,效果如下 Echarts效果图有这方面需求的朋友肯定有在Echarts社区上找过相关3D饼图的方案. 大同小异,所有3D饼图的实现方式,基本上使用了surface曲面的原理,我也是在 ...
vue集成Highcharts 云词图
vue集成Highcharts 云词图最近接手一个需求,需要服务端统计词语,前端出一个云图. 记得很早之前在echarts看到过一个云词图,去翻一下echarts官网没翻到索性去Highcharts ...
使用HighCharts绘制bar形柱状图
需引入highcharts.js文件 Highcharts官方文档网址:http://www.highcharts.com/demo/ http://www.52wulian.org/highchar ...
Highcharts 渐变饼图
一代码 <html> <head> <meta charset="UTF-8" /> <title>Highcharts 渐变饼图 ...
highChart表图大全之饼图圆环图详解
一前言最近在工作上,遇到了关于表图的需求,于是在任务完成之后在这里写篇博客记录一下二基本饼图代码: <html> <head> <meta charset=&q ...
前端圆形进度图_Highcharts 圆形进度条式测量图
Highcharts 圆形进度条式测量图以下实例演示了圆形进度条式测量图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置. 配置 chart.type ...
sangerbox制作heapmap_使用highmaps制作中国地图
Highcharts.setOptions({ lang:{ drillUpText:"返回 > {series.name}"} });//geojson核心数据 var d ...

Highcharts实现下钻多柱series

前言

实现

效果

Highcharts实现下钻多柱series相关推荐

最新文章

热门文章