海圖甜甜圈和條形圖

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