简体   繁体   English

如何在Highcharts中为Stacked Chart的图例创建表格?

[英]How to create a table for legend of a Stacked Chart in Highcharts?

This is javascript code of stack chart in highchart- 这是高图中堆栈图表的javascript代码 -

 legend: {
 align: 'right',
 x: -70,
 verticalAlign: 'top',
 y: 20,
 floating: true,
 backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
 borderColor: '#CCC',
 borderWidth: 1,
 shadow: false
},

Here are series of my data- 以下是我的数据系列 -

series: [{
        name: 'A',
        data: [5]
    }, {
        name: 'B',
        data: [2]
    }, {
        name: 'C',
        data: [3]
    }]

Is it possible to show the legend of above data of a Highcharts (stacked Chart) in a table format ? 是否可以以表格格式显示Highcharts(堆积图表)的上述数据的图例?

Highcharts (stacked Chart) in a table format Highcharts(堆积图表)以表格式

http://jsfiddle.net/ntg7qz3q/1/ http://jsfiddle.net/ntg7qz3q/1/

working fiddle 工作小提琴

 $(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Stacked bar chart'
            },
            xAxis: {
                categories: ['A', 'B', 'C']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                }
            },
            legend: {
     align: 'right',
     x: -70,
     verticalAlign: 'top',
     y: 20,
     floating: true,
     backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
     borderColor: '#CCC',
     borderWidth: 1,
     shadow: false
    },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
            series: [{
            name: 'A',
            data: [5]
        }, {
            name: 'B',
            data: [2]
        }, {
            name: 'C',
            data: [3]
        }]
        });
    });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM