Reagire Highcharts, show leggende come bar

voti
0

1 : questo codice è la visualizzazione delle leggende come cerchio, <<<

Highcharts.chart ( 'flusso', {grafico: {plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, tipo: 'pie', larghezza: 500, Altezza: 260, stile: {MarginBottom: 30px}}, titolo : {text: 'flusso', x: 90, y: 80, stile: {fontSize: 25px, fontWeight: 600}}, tooltip: {pointFormat: '{} series.name: {point.percentage: .1f }% '}, plotOptions: {torta: {allowPointSelect: vero, il cursore: 'puntatore', datalabels: {enabled: true, distanza: -30, colore:' bianco 'fontSize: '9px', formato:' {punto .percentage: .1f}% 'stile: {textOutline: false}}, showInLegend: true}}, crediti: {enabled: false}, leggenda: {align: 'destra', il layout: 'verticale', verticalAlign:' Medio', x: -100, y: 90,}, serie: [{nome: 'flusso', colorByPoint: vero, i dati: [{nome: 'Di proprietà', y: 74, colore: # f5990f}, {nome: 'invitato', y: 36, colore: # fce61e}]}]});

Highcharts.chart ( 'flusso', {grafico: {plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, tipo: 'pie', larghezza: 500, Altezza: 260, stile: {MarginBottom: 30px}}, titolo : {text: 'flusso', x: 90, y: 80, stile: {fontSize: 25px, fontWeight: 600}}, tooltip: {pointFormat: '{} series.name: {point.percentage: .1f }% '}, plotOptions: {torta: {allowPointSelect: vero, il cursore: 'puntatore', datalabels: {enabled: true, distanza: -30, colore:' bianco 'fontSize: '9px', formato:' {punto .percentage: .1f}% 'stile: {textOutline: false}}, showInLegend: true}}, crediti: {enabled: false}, leggenda: {align: 'destra', il layout: 'verticale', verticalAlign:' Medio', x: -100, y: 90,}, serie: [{nome: 'flusso', colorByPoint: vero, i dati: [{nome: 'Di proprietà', y: 74, colore: # f5990f}, {nome: 'invitato', y: 36, colore: # fce61e}]}]}); Questo è il requisito, le leggende devono essere visualizzati come bar

La mia esigenza è le leggende devono essere visualizzati come bar invece di cerchi

È pubblicato 24/10/2019 alle 12:02
fonte dall'utente
In altre lingue...                            


1 risposte

voti
0

È possibile creare ulteriori columngrafici e metterli sotto gli elementi della legenda:

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

Demo dal vivo: http://jsfiddle.net/BlackLabel/wsc4be92/

Risposto il 25/10/2019 a 12:18
fonte dall'utente

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