Graphique Highchart Donut and Bar

Question

Je suis en train de reproduire un graphique similaire à celui-ci (voir l'image ci-dessous). J'ai attaché deux plongeurs distincts pour chaque tableau.

Ce que je suis en train de réaliser: Example Image

Donut Graphique: ===> Voir commentaire ci-dessous pour 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. Je suis en train de configurer ces valeurs de façon dynamique à partir d'un API La valeur totale est de 100%, avec 4-5 catégories/séries.
2. C'est presque complet, il suffit de montrer une valeur vide si les éléments ne totalisent pas 100%.

Bar Graphique: ===>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. Impossible de séparer chaque barre comme l'image. Chaque barre ne s'empile pas.

2. Également en essayant de faire correspondre les deux étiquettes au-dessus de chaque barre ainsi que d'afficher les étiquettes Y sous chaque barre avec seulement la première et la dernière étiquette.

Impossible de publier plus de 2 liens en ce moment.

Merci d'avance pour votre aide.

Answer 1

Comme sebastian mentionné, pour le graphique en anneau, vous pouvez calculer le reste et ajouter que comme point

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' 
     } 
    ] 
}] 

graphique en anneau plnkr de données: https://plnkr.co/edit/LiwDUGg0B6XeXRhXwFGE?p=preview

Pour le graphique à barres, vous ne veulent le plotOptions.series.stacking = percent. Ce convertit vos données série à un pour cent lorsque vous avez déjà fait dans les données transmis.

Maintenant, vous pouvez configurer votre série restante à la valeur max

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

En ce qui concerne la séparation des barres & les étiquettes, je voudrais aller de l'avant et faire 4 diagrammes distincts et utiliser un ngFor pour les charger dans le DOM.

Answer 2

Histogramme seulement:

Vous pouvez obtenir ce genre de regard en créant une série distincte pour chaque point et en le reliant à son propre (correctement positionné) axes x et y.

Un exemple concret de travail: 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 
    }]; 

Pour les axes de positionnement I utilisé top propriété (il est pas documenté dans l'API, mais il fonctionne):

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; 
}); 

Pour chaque série I créé la série 'Uncompleted' correspondante en utilisant ce code:

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 
    } 
    }); 
} 

Ces séries sont empilées.

Via tickPositions, vous pouvez configurer un axe pour qu'il ne comporte que deux étiquettes.

L'info-bulle ne semble pas gérer correctement le décalage supérieur. La ligne y = anchor[1] doit être remplacée par + (point.series.xAxis.top || 0) - (this.chart.plotTop || 0); dans la fonction de base Highcharts.Tooltip.prototype.refresh.

références API:

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