Réagir Highcharts, légendes montrent que bar

voix
0

1 : ce code affiche les légendes comme cercle, <<<

Highcharts.chart ( 'flux', {tableau: {plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, tapez: 'pie', largeur: 500, hauteur: 260, style: {marginBottom: 30px}}, titre : {text: 'Flow', x: 90, y: 80, style: {fontSize: 25px, fontWeight: 600}}, infobulle: {pointFormat: « {series.name}: {point.percentage: .1f }% '}, plotOptions: {pie: {allowPointSelect: true, le curseur: 'pointeur', dataLabels: {permis: true, distance: -30, couleur:' blanc 'fontSize: '9px', format:' {point de sur coûts: .1f}% 'style: {textOutline: false}}, showInLegend: true}}, crédits: {permis: false}, la légende: {align: 'droit', mise en page: 'verticale', verticalAlign:' milieu », x: -100, y: 90,}, série: [{name: 'Flow', colorByPoint: true, les données: [{name: 'Possédé', y: 74, couleur: # f5990f}, {nom: 'invité', y: 36, couleur: # fce61e}]}]});

Highcharts.chart ( 'flux', {tableau: {plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, tapez: 'pie', largeur: 500, hauteur: 260, style: {marginBottom: 30px}}, titre : {text: 'Flow', x: 90, y: 80, style: {fontSize: 25px, fontWeight: 600}}, infobulle: {pointFormat: « {series.name}: {point.percentage: .1f }% '}, plotOptions: {pie: {allowPointSelect: true, le curseur: 'pointeur', dataLabels: {permis: true, distance: -30, couleur:' blanc 'fontSize: '9px', format:' {point de sur coûts: .1f}% 'style: {textOutline: false}}, showInLegend: true}}, crédits: {permis: false}, la légende: {align: 'droit', mise en page: 'verticale', verticalAlign:' milieu », x: -100, y: 90,}, série: [{name: 'Flow', colorByPoint: true, les données: [{name: 'Possédé', y: 74, couleur: # f5990f}, {nom: 'invité', y: 36, couleur: # fce61e}]}]}); Ceci est l'exigence, les légendes doivent être affichées sous forme de barre

Mon exigence est les légendes doivent être affichées sous forme de barre au lieu de cercles

Créé 24/10/2019 à 12:02
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Vous pouvez créer d' autres columncartes et les placer sous les éléments de la légende:

chart: {
    events: {
        load: function() {
            var columnChart1 = Highcharts.chart("columnChart1", columnChartOptions),
                columnChart2,
                xPos = this.legend.group.translateX,
                yPos = this.legend.group.translateY,
                items = this.legend.allItems;

            columnChartOptions.series[0].data = [76];
            columnChartOptions.series[0].color = 'yellow';
            columnChart2 = Highcharts.chart("columnChart2", columnChartOptions);

            columnChart1.renderTo.style.top = yPos + 50 + 15 + items[0]._legendItemPos[1] + 'px';
            columnChart1.renderTo.style.left = xPos + 'px';

            columnChart2.renderTo.style.top = yPos + 50 + 15 + items[1]._legendItemPos[1] + 'px';
            columnChart2.renderTo.style.left = xPos + 'px';
        }
    }
}

Démo en direct: http://jsfiddle.net/BlackLabel/wsc4be92/

Créé 25/10/2019 à 12:18
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more