首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何自定义高图表堆叠列中的每个列

如何自定义高图表堆叠列中的每个列
EN

Stack Overflow用户
提问于 2020-06-27 04:53:32
回答 1查看 55关注 0票数 0

嗨,我需要自定义高图表堆叠列中的每一列

就像这张照片

我给出了这样的实现

代码语言:javascript
运行
复制
{
categories:["6-7","7-8"]
series: [{
        name: 'pass',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Fail',
        data: [2, 2, 3, 2, 1]
    }]
}

但是现在我需要更改这个实现,我必须自定义每个列并添加类别--如何实现这一点--我有这样一个数组

代码语言:javascript
运行
复制
[{"pass":2,"fail":3,"category":"6-7","percentage":"20%"}
{"pass":5,"fail":0,"category":"7-8","percentage":"10%"}]

我想要这样

代码语言:javascript
运行
复制
|percentage|
------------
|  pass    |
|  fail    |
-----------------
  category
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-06-29 09:42:24

您需要对数据进行预处理,以创建高级图表所需的系列结构。使用name属性可以实现“类别”标签,通过堆栈标签格式化程序可以实现“百分比”:

代码语言:javascript
运行
复制
var data = [{
    "pass": 2,
    "fail": 3,
    "category": "6-7",
    "percentage": "20%"
}, {
    "pass": 5,
    "fail": 0,
    "category": "7-8",
    "percentage": "10%"
}];

var series = [{
    name: 'Pass',
    data: []
}, {
    name: 'Fail',
    data: []
}];

data.forEach(function(dataObj) {
    series[0].data.push({
        y: dataObj.pass,
        name: dataObj.category,
        percentage: dataObj.percentage
    });
    series[1].data.push({
        y: dataObj.fail,
        name: dataObj.category
    });
});

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        stackLabels: {
            enabled: true,
            formatter: function() {
                return this.axis.series[0].options.data[this.x].percentage;
            }
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: series
});

现场演示: http://jsfiddle.net/BlackLabel/nfbq2soe/

API参考: https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62606017

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档