X 軸にカテゴリを使用する Highcharts で構築された棒グラフがあります。非常に長い単語のカテゴリです。 カテゴリが常に 1 行に収まるようにする良い方法がわかりません。ツールチップなどを使用して、マウスのホバーオーバーまたはその他の直感的なユーザー操作で長いバージョンを表示できない限り、それらを短縮することはできません。カテゴリが折り返されると、テキストの壁のように見え始めます。
長いカテゴリとデータをきれいに表示するためのアイデアはありますか? データが明確で見栄えのする方法で表示される限り、別の種類のグラフを検討したいと考えています。私は Highcharts を使い続けたいと思っていますが、可能な場合のみです。
編集:多くの努力の後、クロスブラウザー (IE6+) の方法で x 軸のカテゴリラベルにツールチップを追加するというアイデアをあきらめました。JQuery を使用しても、それは可能でも実用的でもないようです。これらの長いカテゴリを適切に表示できるソリューションをまだ探しています (データ バーにカーソルを合わせると、ユーザーにとって十分に明確ではないため、以前に作成したフィドルには満足していません)。
カテゴリが塗りつぶされた問題グラフの図:
JSFiddle コード:
HTML:
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id='mytoolTip'></div>
Javascript:
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa blahblahblah blah blah blah ', 'America blahblahblah blah blah blah ', 'Asia blahblahblah blah blah blah', 'Europe blahblahblah blah blah blah ', 'Oceania blahblahblah blah blah blah '],
title: {
text: null
},
labels: {
formatter: function() {
return(this.value.substring(0,10) + "...");
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
$("#mytoolTip").html(this.x + 'and the value is ' + this.y) ;
return false ;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
});