web-dev-qa-db-fra.com

Highcharts: transforme le symbole de la légende en carré ou en rectangle

J'essaie de faire du symbole de légende un carré ou un rectangle pour un graphe linéaire. Exemple

enter image description here

La ligne va bien. Je ne veux pas changer la largeur de la ligne . 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]
        }]
    });
});

J'ai essayé d'ajouter symbolHeight dans la légende. Mais ça ne marche pas.

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

Comment augmenter le symbole de hauteur de ligne pour le rendre rectangle ou carré?

javascriptjquerycsshighcharts
10
Manu K Mohan

Vous pouvez créer une fausse série comme suit et y indiquer le fournisseur.

$(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 }
    }
            ]
});
});

Démo de travail: DEMO

7
Anchika Agarwal

Il est possible de réaliser des symboles de légende carrés via la configuration. Il suffit de définir legend.symbolRadius value sur 0.

Démo JSFiddle: https://jsfiddle.net/9bzy2qzq/

18
Roman Pavlov

Voici une copie de la question: Comment accéder à legendSymbols et changer leur forme dans HighCharts

Il a une réponse similaire et deux autres:

Première option:

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

Deuxième option:

Vous pouvez modifier l'attribut stroke-width sur l'élément path. 

Nous pouvons fournir aux Highcharts des fonctions qui seront dessinées chaque fois que le graphique sera dessiné. Puisque redraw n'est pas appelé au premier dessin, l'événement load est nécessaire.

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

Toutes les réponses sont correctes mais j'ai trouvé une méthode de piratage assez agréable. Remplacement du symbole rectangulaire de la légende par un carré:

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

JsFiddle

3
RockOnGom

Depuis que Highcharts 5 a introduit le mode stylé, vous pouvez facilement trouver les éléments de symbole et modifier leurs attributs. Pour rendre le symbole carré:

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

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

1
iddo

Si vous souhaitez un symbole rond, vous pouvez utiliser ceci: 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

Pour une légende rectangulaire, nous devons définir squareSymbol: false.

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