wake-up-neo.com

Highcharts: Machen Sie das Legendensymbol zu einem Quadrat oder Rechteck

Ich versuche, das Legendensymbol zu einem Quadrat oder Rechteck für ein Liniendiagramm zu machen. Beispiel

enter image description here

Die Linie ist in Ordnung. Ich möchte die Linienstärke nicht ändern. HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Javascript:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
        renderTo: 'container',
        type: 'line',
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        plotOptions: {
            series: {
                marker: {
                    enabled: false
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            symbolHeight:100,
            borderWidth: 0
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

Ich habe versucht, symbolHeight in der Legende hinzuzufügen. Aber es funktioniert nicht.

legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            symbolHeight:100,
            borderWidth: 0
        },

Wie kann man die Höhe des Liniensymbols erhöhen, um ein Rechteck oder ein Quadrat zu erstellen?

javascriptjquerycsshighcharts
10
Manu K Mohan

Sie können eine gefälschte Serie wie folgt erstellen und mit einem Anbietermarker versehen.

$(function () {
var chart = new Highcharts.Chart({
    chart: {
    renderTo: 'container',
    type: 'line',
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            marker: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',

        //borderWidth: 0
    },

    series: [{

        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        showInLegend : false,


        marker:{enabled:false}

    },{
        name : "testing",
        data : {},
        marker : {symbol : 'square',radius : 12 }
    }
            ]
});
});

Arbeitsdemo: DEMO

7
Anchika Agarwal

Es ist möglich, über die Konfiguration Rechtecksymbole zu erreichen. Setzen Sie einfach legend.symbolRadius value auf 0.

JSFiddle Demo: https://jsfiddle.net/9bzy2qzq/

18
Roman Pavlov

Dies ist eine Kopie der Frage: So greifen Sie auf legendSymbole zu und ändern ihre Form in HighCharts

Es hat eine ähnliche Antwort und zwei andere:

Erste Option: 

Highcharts.seriesTypes.line.prototype.drawLegendSymbol = 
Highcharts.seriesTypes.area.prototype.drawLegendSymbol;

Zweite Option:

Sie können das stroke-width-Attribut des Pfadelements ändern. 

Wir können Highcharts-Funktionen zur Verfügung stellen, die beim Zeichnen des Diagramms gezeichnet werden. Da redraw bei der ersten Zeichnung nicht aufgerufen wird, ist das load-Ereignis erforderlich

chart: {
    events: {
        load: function () { 
            $(".highcharts-legend-item path").attr('stroke-width', 10);
        },
        redraw: function () {
            $(".highcharts-legend-item path").attr('stroke-width', 10);
        }
    }
},
9
Shwaydogg

Alle Antworten sind korrekt, aber ich habe eine hübsche Hackmethode gefunden. Legendenrechtecksymbol durch Quadrat ersetzen:

legend: {
   symbolHeight: 12,
   symbolWidth: 12,
   symbolRadius: 6
}

JsFiddle

3
RockOnGom

Seit Highcharts 5 styleed eingeführt hat, können Sie die Symbolelemente leicht finden und ihre Attribute ändern. Um das Symbol quadratisch zu machen:

$(".highcharts-legend-item path").attr('stroke-width',16);

http://jsfiddle.net/n3h2totc/23/

1
iddo

Wenn Sie ein rundes Symbol wünschen, können Sie folgendes verwenden: http://jsfiddle.net/kL5sghrx/3/

chart: {
    events: {
        load: function(){            
		$( ".highcharts-legend-item path" ).each(function( index ) {
			$(this)
			.attr('d','M10.1,15.3L10.1,15.3c-3,0-5.5-2.5-5.5-5.5v0c0-3,2.5-5.5,5.5-5.5h0c3,0,5.5,2.5,5.5,5.5v0 C15.6,12.8,13.2,15.3,10.1,15.3z')
			.attr('fill', $( this ).attr('stroke'))
			.attr('stroke-dasharray','0,0'); 
		});
      	  },
      redraw: function(){            
		$( ".highcharts-legend-item path" ).each(function( index ) {
			$(this)
			.attr('d','M10.1,15.3L10.1,15.3c-3,0-5.5-2.5-5.5-5.5v0c0-3,2.5-5.5,5.5-5.5h0c3,0,5.5,2.5,5.5,5.5v0 C15.6,12.8,13.2,15.3,10.1,15.3z')
			.attr('fill', $( this ).attr('stroke'))
			.attr('stroke-dasharray','0,0'); 
		});
        }
    },
 }

1
Bill_VA

Für eine rechteckige Legende müssen wir squareSymbol: false einstellen.

Highcharts.chart('container', {
    chart: {
       type: 'column'
    },

    title: {
       text: 'Round legend symbols'
    },

    xAxis: {
       categories: ['Jan', 'Feb', 'Mar', 'Apr']
    },

    legend: {
       symbolWidth: 16,
       symbolRadius: 0,
       squareSymbol: false
    },

    series: [{
        data: [1, 3, 2, 4]
    }, {
        data: [6, 4, 5, 3]
    }, {
        data: [2, 7, 6, 5]
    }]

});
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

0
Ramyani