Highcharts:由字幕构成的传奇 [英] Highcharts: structure legend by subtitles
问题描述
有一件事,我找不到,是否可以在字幕中加入字幕结果。
在我的示例中: http:// jsfiddle .net / gWEtB /
var allData = {
products:[Product1,Product2 ,Product3,Product4]
}
var colors = {
'own':['#3B14AF','#422C83','#210672' ,'#886ED7'],
'comp':['#E7003E','#AD2B4E','#960028','#F33D6E','#F36D91'],
'new': '#00CC00'}
`$(function(){
$('#container')。highcharts({
chart:{
type:'column '
},
title:{
text:'产品转换'
},
xAxis:{
类别:allData.products
},
yAxis:{
min:0,
title:{
text:''
},
标签:{
格式:'{value} %'
}
},
tooltip:{
pointFormat:'< span style =color:{series.color}> {series.name}< / span>:< b> {point.percentage:.0f}%< / b>< br />',
共享:false
},
plotOptions:
列:{
堆栈:'percent',
dataLabels:{
启用:true,
formatter:function(){
return this.percentage .toFixed(2)+'%';
},
color:'#FBF5EF'
}
}
},
图例:{
layout:'vertical',
align:'right',
verticalAlign:'top',
y:30,
},
series:[{
name:'Own product1' ,
data:[5,3,4,7],
color:colors.own [0]
},
{
name:'Own product2' ,
data:[5,3,4,7],
color:colors.own [1]
},
{
name:'Own product3' ,
data:[5,3,4,7],
color:colors.own [2]
},
{
name:'Own product4' ,
data:[5,3,4,7],
color:colors.own [3]
},
{
name:'Competitor 1' ,
data:[2,2,3,2],
color:colors.comp [0]
},
{
名称:'竞争对手2',
数据:[2,2,3,2],
color:colors.comp [1]
},
{
名称:'竞争对手3',
数据:[2,2,3,2],
color:colors.comp [2]
},
{
名称:'竞争对手4',
数据:[2,2,3,2],
color:colors.comp [3]
},
{
名称:'竞争对手5',
data:[2,2,3,2],
color:colors.comp [4]
},{
名称:'Market Potential',
data:[3 ,4,4,2],
color:colors.new
}]
});
});
我想通过这种方式为字幕添加字幕:
消费:
o拥有产品1
o拥有产品2
o拥有产品3
o拥有产品4
比赛:
o竞争对手1
o竞争对手2
o ...
我很感谢所有的帮助和信息。
thx
您可以使用labelFormatter http://api.highcharts。 com / highcharts#legend.labelFormatter
简单的例子: http://jsfiddle.net/gWEtB/1/
labelFormatter:function(){
switch(this.name)
{
case'Own product1':
return'Cannibalization< br />>'+ t他的名字;
休息;
case'Competitor 1':
return this.name +'< br /> Competition';
休息;
case'Market Potential':
return this.name +'< br />市场标题';
休息;
默认值:
返回this.name;
休息;
}
}
I was playing around with Highcharts the last days.
One thing, I couldn't find out, is if it is possible to include subtitles to the legend to structure the results.
In my example: http://jsfiddle.net/gWEtB/
var allData={
products: ["Product1", "Product2", "Product3", "Product4"]
}
var colors={
'own': ['#3B14AF', '#422C83', '#210672', '#886ED7'],
'comp': ['#E7003E', '#AD2B4E', '#960028', '#F33D6E', '#F36D91'],
'new': '#00CC00'}
`$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Product Switching'
},
xAxis: {
categories: allData.products
},
yAxis: {
min: 0,
title: {
text: ''
},
labels:{
format:'{value} %'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.0f}%</b><br/>',
shared: false
},
plotOptions: {
column: {
stacking: 'percent',
dataLabels: {
enabled: true,
formatter: function(){
return this.percentage.toFixed(2)+' %';
},
color:'#FBF5EF'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
},
series: [{
name: 'Own product1',
data: [5, 3, 4, 7],
color: colors.own[0]
},
{
name: 'Own product2',
data: [5, 3, 4, 7],
color: colors.own[1]
},
{
name: 'Own product3',
data: [5, 3, 4, 7],
color: colors.own[2]
},
{
name: 'Own product4',
data: [5, 3, 4, 7],
color: colors.own[3]
},
{
name: 'Competitor 1',
data: [2, 2, 3, 2],
color: colors.comp[0]
},
{
name: 'Competitor 2',
data: [2, 2, 3, 2],
color: colors.comp[1]
},
{
name: 'Competitor 3',
data: [2, 2, 3, 2],
color: colors.comp[2]
},
{
name: 'Competitor 4',
data: [2, 2, 3, 2],
color: colors.comp[3]
},
{
name: 'Competitor 5',
data: [2, 2, 3, 2],
color: colors.comp[4]
}, {
name: 'Market Potential',
data: [3, 4, 4, 2],
color: colors.new
}]
});
});
I look for a way to add subtitles to the legend in this way:
Cannibalization:
o Own product 1
o Own product 2
o Own product 3
o Own product 4
Competition:
o Competitor 1
o Competitor 2
o ...
I am thankful for all help and information.
thx
You can use labelFormatter http://api.highcharts.com/highcharts#legend.labelFormatter
Simple example: http://jsfiddle.net/gWEtB/1/
labelFormatter: function() {
switch(this.name)
{
case 'Own product1':
return 'Cannibalization<br/>'+ this.name;
break;
case 'Competitor 1':
return this.name + '<br/>Competition';
break;
case 'Market Potential':
return this.name + '<br/>Market title';
break;
default:
return this.name;
break;
}
}
这篇关于Highcharts:由字幕构成的传奇的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!