javascript - Highchart 圆环图和条形图

Question

我正在尝试复制与此类似的图表(参见下图)。我为每个图表附加了两个单独的插件。

我想要实现的目标:Example Image

圆环图: ===> 请参阅下面 Plunkr 的评论

 chart: {
                type: 'pie'
            },
            credits: {
                enabled: false
            },
            colors: ['#F59640', '#A589D9', '#F16D64', '#35BEC1', '#EDEDED'],
            title: {
                text: '82',
                style: {
                    color: '#333333',
                    fontWeight: 'bold',
                    fill: '#333333',
                    width: '211px',
                    fontSize: '32px'
                },
                y: -30,
                verticalAlign: 'middle'
            },
            subtitle: {
                text: 'out of 100',
                style: {
                    color: '#333333',
                    fill: '#333333',
                    width: '211px',
                    fontSize: '28px'
                },
                y: 30,
                verticalAlign: 'middle'
            },
            plotOptions: {
                pie: {
                    innerSize: '60%',
                    outerRadius: '70%',
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            exporting: {
                enabled: false
            },
            series: [{
                data: [
                    ['Collaboration', 19.61],
                    ['Reading Articles', 17.47],
                    ['Insight', 19.95],
                    ['Personalization', 25]
                ]
            }]

1. 我正在尝试通过 API 动态设置这些值。总值(value)为 100%，有 4-5 个类别/系列。
2. 已经基本完成，只需在项目加起来未达到 100% 时显示空白值即可。

条形图: ===> Bar Chart Plunkr

            chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        legend: {
            enabled: false
        },
        xAxis: {
            categories: ['Collaboration', 'Reading Articles', 'Insight', 'Personalization'],
            visible: false,
        },
        yAxis: {
            min: 0,
            max: 25,
            title: {
                text: null
            },
            stackLabels: {
                enabled: true,
            },
        },
        exporting: {
            enabled: false
        },
        plotOptions: {
            series: {
                stacking: 'percent'
            },
            bar: {
                grouping: false,
                dataLabels: {
                    enabled: false
                }
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Remaining',
            data: [5.39, 7.53, 5.05, 0],
            borderWidth: 0,
            color: 'rgba(0,0,0,0)'
        }, {
            name: 'Remaining',
            data: [5.39, 7.53, 5.05, 0],
            borderWidth: 0,
            stack: 1,
            animation: false,
            color: '#CCC'
        }, {
            name: 'Completed',
            data: [{ y: 19.61, color: '#F59640' }, { y: 17.47, color: '#A589D9' }, { y: 19.95, color: '#F16D64' },
            { y: 25, color: '#35BEC1' }]
        }]

1. 无法像图像一样分隔每个条形。每个条形都没有相互堆叠。

2. 还尝试匹配每个条形上方的标签，并在每个条形下方显示 Y 标签，仅显示第一个和最后一个标签。

目前无法发布 2 个以上链接。

预先感谢您的帮助。

Answer 1

正如塞巴斯蒂安提到的，对于圆环图，您可以计算余数并将其添加为数据点

series: [{
    data: [
        ['Collaboration', 19.61],
        ['Usability', 17.47],
        ['Insight', 19.95],
        ['Personalization', 25],
        {
            name: 'Missing',
            y: 17.97, // calculate missing value and use as a data point
            color: '#ccc'
        }
    ]
}]

圆环图plnkr:https://plnkr.co/edit/LiwDUGg0B6XeXRhXwFGE?p=preview

对于条形图，您不需要 plotOptions.series.stacking =百分比。当您已经在传入的数据中完成此操作后，这会将您的系列数据转换为百分比。

现在您可以将剩余系列设置为最大值

{
    name: 'Remaining',
    data: [25, 25, 25, 25],
    borderWidth: 0,
    stack: 1,
    animation: false,
    color: '#CCC'
}

至于分离条形图和标签，我会继续制作 4 个单独的图表，并使用 ngFor 将它们加载到 DOM 中。