Reagir Highcharts, mostram lendas como bar

votos
0

1 : este código é visualizadas as lendas como círculo, <<<

Highcharts.chart ( 'fluxo', {gráfico: {plotBackgroundColor: nulo, plotBorderWidth: nulo, plotShadow: falso, tipo: 'torta', largura: 500, altura: 260, estilo: {marginBottom: 30px}}, título : {text: 'fluxo', x: 90, y: 80, estilo: {fontSize: 25px, fontWeight: 600}}, dica: {pointFormat: '{series.name}: {point.percentage: .1f }% '}, plotOptions: {torta: {allowPointSelect: true, cursor: 'ponteiro', dataLabels: {habilitado: true, distância: -30, cor:' branco 'fontSize: '9px', formato:' {ponto .percentage: .1f}% 'estilo: {textOutline: false}}, showInLegend: true}}, créditos: {ativado: false}, lenda: {align: 'direita', o layout: 'vertical', verticalAlign:' meio', x: -100, y: 90,} série: [{name: 'Flow', colorByPoint: true, os dados: [{name: 'propriedade', y: 74, cor: # f5990f}, {name: 'convidado', y: 36, cor: # fce61e}]}]});

Highcharts.chart ( 'fluxo', {gráfico: {plotBackgroundColor: nulo, plotBorderWidth: nulo, plotShadow: falso, tipo: 'torta', largura: 500, altura: 260, estilo: {marginBottom: 30px}}, título : {text: 'fluxo', x: 90, y: 80, estilo: {fontSize: 25px, fontWeight: 600}}, dica: {pointFormat: '{series.name}: {point.percentage: .1f }% '}, plotOptions: {torta: {allowPointSelect: true, cursor: 'ponteiro', dataLabels: {habilitado: true, distância: -30, cor:' branco 'fontSize: '9px', formato:' {ponto .percentage: .1f}% 'estilo: {textOutline: false}}, showInLegend: true}}, créditos: {ativado: false}, lenda: {align: 'direita', o layout: 'vertical', verticalAlign:' meio', x: -100, y: 90,} série: [{name: 'Flow', colorByPoint: true, os dados: [{name: 'propriedade', y: 74, cor: # f5990f}, {name: 'convidado', y: 36, cor: # fce61e}]}]}); Este é o requisito, as legendas devem ser apresentadas como bar

Minha exigência é as lendas deve ser exibido como bar em vez de círculos

Publicado 24/10/2019 em 12:02
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

Você pode criar adicionais columngráficos e colocá-los sob os itens de 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';
        }
    }
}

Demonstração ao vivo: http://jsfiddle.net/BlackLabel/wsc4be92/

Respondeu 25/10/2019 em 12:18
fonte usuário

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