Javascript 处理具有非常长的类别名称的 highcharts 条形图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11543357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dealing with highcharts bar chart with really long category names
提问by AlexMA
I have a bar chart built with Highcharts that uses categories for its x-axis--really long wordy categories. I can't figure out a good way to make sure categories always stay on one line. I cannot abbreviate them unless I can use a tooltip or something to show the long version upon mouse hover-over or some other intuitive user interaction. When the categories line-wrap, it starts to look like a wall of text.
我有一个用 Highcharts 构建的条形图，它的 x 轴使用类别——非常冗长的类别。 我想不出一种确保类别始终保持在一行的好方法。我不能缩写它们，除非我可以使用工具提示或其他东西在鼠标悬停或其他一些直观的用户交互时显示长版本。当类别换行时，它开始看起来像一堵文字墙。
Any ideas for displaying long categories and data in a clean way? I'm willing to consider a different type of chart as long as it displays the data in a clear and nice-looking way. I'd like to stick with Highcharts but only if possible.
以干净的方式显示长类别和数据的任何想法？我愿意考虑使用不同类型的图表，只要它以清晰美观的方式显示数据即可。我想坚持使用 Highcharts，但只有在可能的情况下。
EDIT: After much effort, I've given up on the idea of adding a tooltip to an x-axis category label in a cross-browser (IE6+) way. Even with JQuery it doesn't seem possible or practical. I'm still looking for any solution which allows me to display these long categories nicely (I'm not happy with the fiddleI created earlier because hovering over the data bar is not obvious enough to the user).
编辑：经过很多努力，我已经放弃了以跨浏览器 (IE6+) 方式向 x 轴类别标签添加工具提示的想法。即使使用 JQuery，它似乎也不可能或不实用。我仍在寻找任何可以让我很好地显示这些长类别的解决方案（我对我之前创建的小提琴不满意，因为悬停在数据栏上对用户来说不够明显）。
A picture of the problem graph, with categories blacked out:
问题图的图片，类别被涂黑：
JSFiddle Code:
JSFiddle 代码：
HTML:
HTML：
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id='mytoolTip'></div>
Javascript:
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]
}]
});
});
});
回答by Markus Hay
Try this fiddle:http://jsfiddle.net/a6zsn/70/
试试这个小提琴：http : //jsfiddle.net/a6zsn/70/
We had a similar issue which we eventually solved by allowing the labels to use HTML. While we didn't go with the exact solution posted below, this should work for you as it uses the jQueryUI tooltip widget to show the full text on hover.
我们有一个类似的问题，我们最终通过允许标签使用 HTML 解决了这个问题。虽然我们没有采用下面发布的确切解决方案，但这应该对您有用，因为它使用 jQueryUI 工具提示小部件在悬停时显示全文。
Note how I'm defining the xAxis.labels object.
请注意我是如何定义 xAxis.labels 对象的。
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
events: {
load: function (event) {
$('.js-ellipse').tooltip();
}
}
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa is the best place to do safari. Label is soooo big that it iss ugly now. =(. -38023-8412-4812-4812-403-8523-52309583409853409530495340985 ', 'America is the best place you can ever live in ', 'Asia is the best food ever ', 'Europe best chicks ever on earth ', 'Oceania i dont know any thing about this place '],
title: {
text: null
},
labels: {
formatter: function () {
var text = this.value,
formatted = text.length > 25 ? text.substring(0, 25) + '...' : text;
return '<div class="js-ellipse" style="width:150px; overflow:hidden" title="' + text + '">' + formatted + '</div>';
},
style: {
width: '150px'
},
useHTML: true
}
},
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]
}]
});
});
});
回答by Mina Gabriel
workingjsFiddle
工作jsFiddle
moving the tool tip :
移动工具提示：
HTML
HTML
<div id='mytoolTip'></div>?
JavaScript
JavaScript
tooltip: {
formatter: function() {
$("#mytoolTip").html(this.x + 'and the value is ' + this.y) ;
return false ;
}
},
this is how you can get the category name from the tool-tip hovering
这是您如何从悬停的工具提示中获取类别名称的方法
this.key
回答by Geek
Trim the labels
修剪标签
xAxis: {
categories: ['Foo afkhbakfbakjfbakfbnbafnbaf', 'Bar', 'Foobar'],
labels: {
formatter: function() {
return this.value.substring(0, 8);
}
}
},
