我正在尝试使用向下钻取实现堆叠列，但我认为有一个错误，当我单击并返回原始图表时，列更改为“透明”，或者我做错了什么？
这是js：
http://jsfiddle.net/NULTY/410/
我正在使用 3 个类别：
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox','chrome'],
问问题
7455 次
2 回答
0
我已经为那些希望钻取在列而不是细分的人提出了一个编程解决方案
HTML 看起来像这样：
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<pre id="tsv" style="display:none">Root Message and Root Variant Root Variant Thumbs Up Root Variant No Rating Root Variant Thumbs Down
Canned A | Canned A 25.00% 45.00% 30.00%
Canned A | Canned A01 25.01% 44.99% 30.00%
Canned A | Canned A02 27.01% 42.99% 30.00%
Canned A | Canned A03 26.01% 43.99% 30.00%
Canned A | Canned A04 25.50% 42.50% 32.00%
Canned B | Canned B 41.00% 38.00% 21.00%
Canned B | Canned B01 41.01% 37.99% 21.00%
Canned B | Canned B02 38.01% 37.99% 24.00%
Canned B | Canned B03 43.01% 41.99% 15.00%
Canned C | Canned C 58.00% 36.00% 6.00%
Canned C | Canned C01 57.01% 35.99% 6.00%
Canned C | Canned C02 56.01% 35.99% 7.00%
Canned C | Canned C03 58.01% 36.99% 5.00%</pre>
Javascript 看起来像这样：
var chart;
var premades = [],
premadesTU = [],
premadesNR = [],
premadesTD = [],
premadesTUData = [],
premadesNRData = [],
premadesTDData = [],
versions = [],
versionsTU = [],
versionsNR = [],
versionsTD = [];
var premadesCount = -1;
$(function () {
function setChart(categories, source) {
chart.xAxis[0].setCategories(categories);
chart.xAxis[0].setExtremes(0, 1);
while(chart.series.length > 0){
chart.series[0].remove(true);
}
if(source != null && source.series){
for(var i = 0; i < source.series.length; i ++ ){
chart.addSeries({
name: source.series[i].name,
data: source.series[i].data,
color: source.series[i].color || 'white',
tooltip: {
valueSuffix: ' %'
}
});
}
} else {
chart.addSeries({
name: 'Thumbs Up',
data: premadesTUData,
color: '#87b87f',
tooltip: { valueSuffix: ' %' }
});
chart.addSeries({
name: 'No Rating',
data: premadesNRData,
color: '#fee188',
tooltip: { valueSuffix: ' %' }
});
chart.addSeries({
name: 'Thumbs Down',
data: premadesTDData,
color: '#d15b47',
tooltip: { valueSuffix: ' %' }
});
}
}
Highcharts.data({
csv: document.getElementById('tsv').innerHTML,
itemDelimiter: '\t',
parsed: function (columns) {
// Parse percentage strings - Thumbs Up
columns[1] = $.map(columns[1], function (value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
// Parse percentage strings - No Rating
columns[2] = $.map(columns[2], function (value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
// Parse percentage strings - Thumbs Down
columns[3] = $.map(columns[3], function (value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
var previousPremade = '',
previousValues = [ 0, 0, 0 ],
previousCount = 0;
$.each(columns[0], function (i, name) {
var premade,
version;
// skip header row
if (i > 0) {
// Split into premade and version
premade = name.split(' | ')[0];
version = name.split(' | ')[1];
// Is it the same premade as previous row?
if (previousPremade === premade) {
previousValues[0] += columns[1][i];
previousValues[1] += columns[2][i];
previousValues[2] += columns[3][i];
previousCount++;
} else {
// No, different premade
if (previousPremade !== '') {
// add premade and values to premades array
var tu = Number((previousValues[0] / previousCount).toFixed(1));
var nr = Number((previousValues[1] / previousCount).toFixed(1));
var td = Number((previousValues[2] / previousCount).toFixed(1));
premadesTU[premadesCount].push(tu);
premadesNR[premadesCount].push(nr);
premadesTD[premadesCount].push(td);
// reset values
previousValues = [ 0, 0, 0 ];
previousCount = 0;
}
premadesCount++;
premades[premadesCount] = premade;
premadesTU[premadesCount] = [];
premadesNR[premadesCount] = [];
premadesTD[premadesCount] = [];
previousPremade = premade;
previousValues[0] += columns[1][i];
previousValues[1] += columns[2][i];
previousValues[2] += columns[3][i];
previousCount++;
}
// Create the version data
if (version !== null) {
if (!versions[premadesCount]) {
versions[premadesCount] = [];
versionsTU[premadesCount] = [];
versionsNR[premadesCount] = [];
versionsTD[premadesCount] = [];
}
versions[premadesCount].push(version);
versionsTU[premadesCount].push(columns[1][i]);
versionsNR[premadesCount].push(columns[2][i]);
versionsTD[premadesCount].push(columns[3][i]);
}
}
});
// add the last entry
// add premade and values to premades array
var tu = Number((previousValues[0] / previousCount).toFixed(1));
var nr = Number((previousValues[1] / previousCount).toFixed(1));
var td = Number((previousValues[2] / previousCount).toFixed(1));
premadesTU[premadesCount].push(tu);
premadesNR[premadesCount].push(nr);
premadesTD[premadesCount].push(td);
for (var i = 0; i <= premadesCount; i++) {
premadesTUData.push({
name: premades[i],
y: premadesTU[i][0],
color: '#87b87f',
drilldown: {
categories: versions[i],
series: [{
name: 'Thumbs Up',
data: versionsTU[i],
color: '#87b87f',
tooltip: { valueSuffix: ' %' }
},{
name: 'No Rating',
data: versionsNR[i],
color: '#fee188',
tooltip: { valueSuffix: ' %' }
},{
name: 'Thumbs Down',
data: versionsTD[i],
color: '#d15b47',
tooltip: { valueSuffix: ' %' }
}]
}
});
premadesNRData.push({
name: premades[i],
y: premadesNR[i][0],
color: '#fee188',
drilldown: {
categories: versions[i],
series: [{
name: 'Thumbs Up',
data: versionsTU[i],
color: '#87b87f',
tooltip: { valueSuffix: ' %' }
},{
name: 'No Rating',
data: versionsNR[i],
color: '#fee188',
tooltip: { valueSuffix: ' %' }
},{
name: 'Thumbs Down',
data: versionsTD[i],
color: '#d15b47',
tooltip: { valueSuffix: ' %' }
}]
}
});
premadesTDData.push({
name: premades[i],
y: premadesTD[i][0],
color: '#d15b47',
drilldown: {
categories: versions[i],
series: [{
name: 'Thumbs Up',
data: versionsTU[i],
color: '#87b87f',
tooltip: { valueSuffix: ' %' }
},{
name: 'No Rating',
data: versionsNR[i],
color: '#fee188',
tooltip: { valueSuffix: ' %' }
},{
name: 'Thumbs Down',
data: versionsTD[i],
color: '#d15b47',
tooltip: { valueSuffix: ' %' }
}]
}
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Premade Messages - Success'
},
subtitle: {
text: 'Click the columns to view versions.'
},
xAxis: {
categories: premades,
min: 0,
max: 1
},
scrollbar: {
enabled: true
},
yAxis: {
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.categories, drilldown);
} else { // restore
setChart(premades, null);
}
}
}
},
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
credits: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>'
,
footerFormat: '</table>',
shared: true,
useHTML: true
},
series: [{
name: 'Thumbs Up',
data: premadesTUData,
color: '#87b87f',
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'Not Rated',
data: premadesNRData,
color: '#fee188',
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'Thumbs Down',
data: premadesTDData,
color: '#d15b47',
tooltip: {
valueSuffix: ' %'
}
}]
});
}
});
});
你可以看到它在这里工作：http: //jsfiddle.net/limogesdotnet/3f6sff75/
希望这可以帮助。
于 2014-10-14T21:50:27.137 回答
0
看看这段代码，认为它可以帮助你。
http://jsfiddle.net/NULTY/753/
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
level = 0,
data = [{
y: 55.11,
color: colors[0],
drilldown: {
type: 'pie',
name: 'MSIE versions',
categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
level: 1,
data: [11,10.85, 7.35, 2.41],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
type: 'pie',
name: 'Firefox versions',
categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
data: [13.52, 5.43, 1.58, 0.83, 0.20],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
type: 'pie',
name: 'Chrome versions',
categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
type: 'pie',
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 41'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
type: 'pie',
name: 'Opera versions',
categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
data: [1.65, 0.37, 0.12],
color: colors[4]
}
}],
data2 = [{
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
data: [13.52, 5.43, 1.58, 0.83, 0.20],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 41'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
data: [1.65, 0.37, 0.12],
color: colors[4]
}
},{
y: 55.11,
color: colors[0],
drilldown: {
type: 'column',
name: 'MSIE versions',
categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
level: 1,
data: [11,10.85, 7.35, 2.41],
color: colors[0]
}
}];
function setChart(name, categories, data, color, level, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
chart.series[0].remove();
if(dataLen === 1){
chart.series[0].remove();
}
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
},
pie: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point, s = '';
switch (this.series.options.level) {
case 0:
s = 'row 1 level 1 instructions<br/>';
s += ' row 2 level 1 instructions';
break;
case 1:
s = 'row 1 level 2 instructions <br/>';
s += ' row 2 level 2 instructions';
break;
case 2:
s = 'row 1 level 3 instructions<br/>';
s += 'row 2 level 3 instructions';
break;
}
return s;
}
},
series: [{
name: name+" 1",
level: level,
data: data,
color: 'white'
},{
name: name,
level: level,
data: data2,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
于 2014-04-11T15:00:06.457 回答