凡例記号を線グラフの正方形または長方形にしようとしています。 例
ラインは結構です。線幅は変えたくない。 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]
}]
});
});
凡例にsymbolHeightを追加してみました。しかし、機能していません。
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
symbolHeight:100,
borderWidth: 0
},
ラインシンボルの高さを上げて長方形または正方形にする方法は?
次のようにして偽のシリーズを作成し、それにプロバイダーマーカーを作成できます。
$(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 }
}
]
});
});
作業デモ: [〜#〜] demo [〜#〜]
設定により、四角い凡例シンボルを作成することが可能です。 legend.symbolRadius
値を0
に設定するだけです。
JSFiddleデモ: https://jsfiddle.net/9bzy2qzq/
これは質問のコピーです: legendSymbolsにアクセスし、HighChartsでその形状を変更する方法
同様の答えと他の2つがあります。
最初のオプション:
Highcharts.seriesTypes.line.prototype.drawLegendSymbol =
Highcharts.seriesTypes.area.prototype.drawLegendSymbol;
2番目のオプション:
パス要素のstroke-width
属性を変更できます。
チャートが描画されるたびに描画される関数をHighchartsに提供できます。 redraw
は最初の描画で呼び出されないため、load
イベントが必要です
chart: {
events: {
load: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
},
redraw: function () {
$(".highcharts-legend-item path").attr('stroke-width', 10);
}
}
},
すべての答えは正しいですが、かなりハックする方法を見つけました。凡例の長方形シンボルを正方形に置き換える:
legend: {
symbolHeight: 12,
symbolWidth: 12,
symbolRadius: 6
}
Highcharts 5ではスタイルモードが導入されているため、シンボル要素を簡単に見つけてその属性を変更できます。シンボルを正方形にするには:
$(".highcharts-legend-item path").attr('stroke-width',16);
丸い記号が必要な場合は、これを使用できます: 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');
});
}
},
}
長方形の凡例の場合、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>