У меня есть гистограмма, построенная с помощью Highcharts, которая использует категории для своей оси x - действительно многословные категории. Я не могу найти хороший способ убедиться, что категории всегда остаются на одной линии. Я не могу их сокращать, если я не могу использовать всплывающую подсказку или что-то, чтобы показать длинную версию при наведении мыши или другом интуитивном взаимодействии с пользователем. Когда категория line-wrap, она начинает выглядеть как стена текста.
Любые идеи для отображения длинных категорий и данных в чистом виде. Я готов рассмотреть другой тип диаграммы, пока он отображает данные четким и красивым способом. Я хотел бы придерживаться Highcharts, но только по возможности.
ИЗМЕНИТЬ: После долгих усилий я отказался от идеи добавления всплывающей подсказки к метке категории x в виде кросс-браузера (IE6 +). Даже с JQuery это не представляется возможным или практичным. Я все еще ищу любое решение, которое позволяет мне отображать эти длинные категории (я не доволен fiddle, который я создал ранее потому что наведение на панель данных недостаточно очевидно для пользователя).
Изображение графического символа проблемы с категориями:
Код 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]
}]
});
});
});