Question

我试图复制类似于此的图表（见下图）。我为每张图表附加了两个单独的掠夺者。

我想要实现的目标：Example Image

甜甜圈图表： ===＆gt;请参阅以下评论，了解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]
                ]
            }]

我试图从API动态设置这些值。总价值为100％，有4-5个类别/系列。
它几乎完整，只需要显示空白值，如果项目加起来不是100％。

条形图： ===＆gt; 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' }]
        }]

无法像图像一样分隔每个条形图。每个酒吧都没有相互堆叠。
同时尝试将每个条形图上方的标签与两个条形图下方的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 = percent。当您在传入的数据中已经完成此操作时，这会将您的系列数据转换为百分比。

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

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

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

Answer 2

仅限条形图

你可以通过为每个点创建一个单独的系列并将其链接到它自己的（正确定位的）x和y轴来实现这种外观。

实时工作示例： http://jsfiddle.net/kkulig/41q6k8tc/

var series = [{
      data: [{
          y: 19.61,
          color: '#F59640'
        }],
        name: 'Complete',
        xAxis: 0,
        yAxis: 0
    }, {
      data: [{
        y: 17.47,
        color: '#A589D9'
      }],
      name: 'Complete',
      xAxis: 1,
      yAxis: 1
    }, {
      data: [{
        y: 19.95,
        color: '#F16D64'
      }],
      name: 'Complete',
      xAxis: 2,
      yAxis: 2
    }, {
      data: [{
        y: 25,
        color: '#35BEC1'
      }],
      name: 'Complete',
      xAxis: 3,
      yAxis: 3
    }];

对于定位轴，我使用了top属性（它未在API中记录，但它有效）：

var xAxes = [{
  categories: ['Collaboration'],
}, {
  categories: ['Reading Articles'],
  top: '25%'
}, {
  categories: ['Insight'],
  top: '50%'
}, {
  categories: ['Personalization'],
  top: '75%'
}].map(function(axis) {
  // common options
  axis.height = '25%';
  axis.offset = 0;
  axis.lineWidth = 0;
  axis.tickWidth = 0;

  return axis;
});

对于每个系列，我使用以下代码创建了相应的“未完成”系列：

for(var i = series.length - 1; i >= 0; i--) {
    series.push({
    name: 'Uncompleted',
    data: [25 - series[i].data[0].y],
    xAxis: series[i].xAxis,
    yAxis: series[i].yAxis,
    color: '#ccc',
    dataLabels: {
        enabled: false
    }
  });
}

这些系列是堆叠的。

通过tickPositions，您可以将轴配置为只有两个标签。

工具提示似乎无法正确处理顶部偏移。行y = anchor[1]需要更改为+ (point.series.xAxis.top || 0) - (this.chart.plotTop || 0);核心功能中的Highcharts.Tooltip.prototype.refresh。

API参考：

Highchart甜甜圈和条形图

2 个答案: