Reageer Highcharts, tonen legendes als bar

stemmen
0

1 : deze code is de weergave van de legendes als cirkel, <<<

Highcharts.chart (flow, {grafiek: {plotBackgroundColor null, plotBorderWidth null, plotShadow: valse, type: pastei, breedte: 500, height: 260, style: {marginBottom: 30px}}, title : {text: 'Flow', x: 90, y: 80, stijl: {fontSize: 25px, fontWeight: 600}}, tooltip: {pointFormat: '{series.name}: {point.percentage: .1f }% '}, plotOptions: {pie: {allowPointSelect: true, cursor: 'pointer', dataLabels: {ingeschakeld: true, afstand: -30, color:' witte 'fontSize: '9px', formaat:' {punt .percentage: .1f}% 'stijl: {textOutline: false}}, showInLegend: true}}, credits: {ingeschakeld: false}, legende: {uitlijnen: 'rechts', lay-out: 'verticale', verticalAlign:' middelste', x: -100, y: 90}, reeks: [{name: 'Flow', colorByPoint: waar gegevens: [{name: 'Eigendom', y: 74, kleur: # f5990f}, {name: 'Invited', y: 36, kleur: # fce61e}]}]});

Highcharts.chart (flow, {grafiek: {plotBackgroundColor null, plotBorderWidth null, plotShadow: valse, type: pastei, breedte: 500, height: 260, style: {marginBottom: 30px}}, title : {text: 'Flow', x: 90, y: 80, stijl: {fontSize: 25px, fontWeight: 600}}, tooltip: {pointFormat: '{series.name}: {point.percentage: .1f }% '}, plotOptions: {pie: {allowPointSelect: true, cursor: 'pointer', dataLabels: {ingeschakeld: true, afstand: -30, color:' witte 'fontSize: '9px', formaat:' {punt .percentage: .1f}% 'stijl: {textOutline: false}}, showInLegend: true}}, credits: {ingeschakeld: false}, legende: {uitlijnen: 'rechts', lay-out: 'verticale', verticalAlign:' middelste', x: -100, y: 90}, reeks: [{name: 'Flow', colorByPoint: waar gegevens: [{name: 'Eigendom', y: 74, kleur: # f5990f}, {name: 'Invited', y: 36, kleur: # fce61e}]}]}); Dit is de eis, moet de legendes worden weergegeven als bar

Mijn eis is de legendes moet worden weergegeven als bar in plaats van cirkels

De vraag is gesteld op 24/10/2019 om 12:02
bron van user
In andere talen...                            


1 antwoorden

stemmen
0

U kunt extra creëren columngrafieken en leg ze onder de legende items:

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

Live demo: http://jsfiddle.net/BlackLabel/wsc4be92/

antwoordde op 25/10/2019 om 12:18
bron van user

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