React highcharts, legende spectacol ca bar

voturi
0

1 : acest cod se afișează legendele ca cerc, <<<

Highcharts.chart ( 'flow', {diagramă: {plotBackgroundColor: null, plotBorderWidth: nul, plotShadow: fals, tip: 'pie', lățime: 500, înălțime: 260, stil: {marginBottom: 30px}}, titlul : {text: 'Flow', x: 90, y: 80, stil: {FONTSIZE: 25px, fontWeight: 600}}, tooltip: {pointFormat: „{series.name}: {point.percentage: .1f }% '}, plotOptions: {proporțiilor: {allowPointSelect: true, cursorul: 'pointer', dataLabels: {activat: true, distanta: -30, culoare:' alb 'FONTSIZE: '9px', formatul:' {litera .percentage: .1f}% 'stil: {textOutline: fals}}, showInLegend: true}}, credite: {activat: false}, legenda: {align: 'dreapta', aspect: 'verticală', verticalAlign:' mijloc“, x: -100, y: 90}, seria: [{name: 'Flow', colorByPoint: true, date: [{name: 'Owned', y: 74, culoare: # f5990f}, {name: 'invitat', y: 36, culoare: # fce61e}]}]});

Highcharts.chart ( 'flow', {diagramă: {plotBackgroundColor: null, plotBorderWidth: nul, plotShadow: fals, tip: 'pie', lățime: 500, înălțime: 260, stil: {marginBottom: 30px}}, titlul : {text: 'Flow', x: 90, y: 80, stil: {FONTSIZE: 25px, fontWeight: 600}}, tooltip: {pointFormat: „{series.name}: {point.percentage: .1f }% '}, plotOptions: {proporțiilor: {allowPointSelect: true, cursorul: 'pointer', dataLabels: {activat: true, distanta: -30, culoare:' alb 'FONTSIZE: '9px', formatul:' {litera .percentage: .1f}% 'stil: {textOutline: fals}}, showInLegend: true}}, credite: {activat: false}, legenda: {align: 'dreapta', aspect: 'verticală', verticalAlign:' mijloc“, x: -100, y: 90}, seria: [{name: 'Flow', colorByPoint: true, date: [{name: 'Owned', y: 74, culoare: # f5990f}, {name: 'invitat', y: 36, culoare: # fce61e}]}]}); Aceasta este cerința, legendele ar trebui să fie afișată ca bare

Cerința mea este arbitru ar trebui să fie afișate ca bare în loc de cercuri

Întrebat 24/10/2019 la 12:02
sursa de către utilizator
În alte limbi...                            


1 răspunsuri

voturi
0

Puteți crea suplimentare columndiagrame și să le plaseze sub elementele 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ție live: http://jsfiddle.net/BlackLabel/wsc4be92/

Publicat 25/10/2019 la 12:18
sursa de către utilizator

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