海图甜甜圈和条形图

Question

我正在尝试复制与此类似的图表（请参见下图）。 我为每个图表附加了两个单独的松节器。

我想要达到的目标： 示例图像

甜甜圈图： ===>请参阅下面的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动态设置这些值。 总价值为100％，包含4-5个类别/系列。
2. 它几乎完成了，如果项加起来不等于100％，只需显示空白值。

条形图： ===> 条形图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 = 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参考：

• http://api.highcharts.com/highcharts/series.bar.xAxis
• http://api.highcharts.com/highcharts/series.bar.yAxis
• http://api.highcharts.com/highcharts/yAxis.tickPositions