Highchart甜甜圈和條形圖

我在嘗試複製類似於此的圖表（請參閱下圖）。我爲每個圖表附加了兩個單獨的強盜。Highchart甜甜圈和條形圖

圓環圖： ===>請參見下面評論的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％。

條形圖： ===>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個鏈接。

非常感謝您的幫助。

來源

2017-10-09 Vinny P.

附缺少Plunkr爲圓環圖=== >> [圓環圖實施例：（HTTPS：/ /plnkr.co/edit/5ZsHoflpCu8jzm3J0Yui?p=info）<=== –

我上次試圖達成這樣的目標，我加了剩下的r（在甜甜圈和條形圖中）作爲另一個項目... –

塞巴斯蒂安提到的，圓環圖就可以計算出剩餘部分，且添加的數據點

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中。

來源

2017-10-09 20:44:14 LLai

如果我有空閒時間，我會做一個plnkr，但這應該是一個很好的起點。 – LLai

甜甜圈圖示例很好，謝謝。 –

酒吧僅圖表：

您可以通過創建爲每個點的獨立系列，並鏈接到它自己的（正確定位）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; 
});

對於每一個系列I使用此代碼創建相應的「未完成」系列：

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出處：

來源

2017-10-10 14:55:59

謝謝你的建議。我已經實施了你的建議，並且一切都很順利。但是，當我將鼠標懸停在甜甜圈圖表上時，我收到一個錯誤消息，它似乎沒有任何xAxis或Top屬性，因此未顯示工具提示。條形圖沒有問題。 –

請提供該錯誤的堆棧跟蹤。 –

https://imgur.com/ws09w0Z --TypeError：無法讀取未定義的屬性'top' –

Highchart甜甜圈和條形圖

回答

相關問題