我有一个双轴高图，有一个向下钻取的柱子和一个样条曲线，样条曲线下面的列区域存在问题，它不会向下钻取列。
$(function() {
Highcharts.setOptions({
lang: {
drillUpText: '<< Go To {series.name}'
}
});
Highcharts
.data({
csv: document.getElementById('tsv').innerHTML,
itemDelimiter: '\t',
parsed: function(columns) {
var brands = {},
cpc = {},
brandsData = [],
cpcData = [],
temp = {},
versions = {},
drilldownSeries = [],
$container = $('#container'),
chart = $('container').highcharts(),
origChartWidth = 1500,
origChartHeight = 600,
chartWidth = origChartWidth,
chartHeight = origChartHeight;
// Parse percentage strings
columns[1] = $
.map(
columns[1],
function(value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
columns[3] = $
.map(
columns[3],
function(value) {
if (value.indexOf('*') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
columns[4] = $
.map(
columns[4],
function(value) {
if (value.indexOf('*') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
columns[5] = $
.map(
columns[5],
function(value) {
if (value.indexOf('*') === value.length - 1) {
value = value.split('*')[0];
}
return value;
});
columns[2] = $
.map(
columns[2],
function(value) {
if (value.indexOf('*') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
$
.each(
columns[0],
function(i, name) {
var brand, version;
if (i > 0) {
// Remove special edition notes
name = name.split('@@');
// Split into brand and version
version = name[1];
brand = name[0];
// Create the main data
if (!brands[brand]) {
temp[brand] = (columns[3][i]);
brands[brand] = temp[brand] + "@@" + columns[2][i] + "@@" + columns[5][i];
} else {
temp[brand] = (columns[3][i]);
brands[brand] = temp[brand] + "@@" + columns[2][i] + "@@" + columns[5][i];
}
// Create the version data
if (version !== null) {
if (!versions[brand]) {
versions[brand] = [];
}
if (version == 1) {
versions[brand]
.push([
'Jan-' + columns[4][i],
columns[1][i]
]);
} else if (version == 2) {
versions[brand]
.push([
'Feb-' + columns[4][i],
columns[1][i]
]);
} else if (version == 3) {
versions[brand]
.push([
'Mar-' + columns[4][i],
columns[1][i]
]);
} else if (version == 4) {
versions[brand]
.push([
'Apr-' + columns[4][i],
columns[1][i]
]);
} else if (version == 5) {
versions[brand]
.push([
'May-' + columns[4][i],
columns[1][i]
]);
} else if (version == 6) {
versions[brand]
.push([
'Jun-' + columns[4][i],
columns[1][i]
]);
} else if (version == 7) {
versions[brand]
.push([
'Jul-' + columns[4][i],
columns[1][i]
]);
} else if (version == 8) {
versions[brand]
.push([
'Aug-' + columns[4][i],
columns[1][i]
]);
} else if (version == 9) {
versions[brand]
.push([
'Sep-' + columns[4][i],
columns[1][i]
]);
} else if (version == 10) {
versions[brand]
.push([
'Oct-' + columns[4][i],
columns[1][i]
]);
} else if (version == 11) {
versions[brand]
.push([
'Nov-' + columns[4][i],
columns[1][i]
]);
} else if (version == 12) {
versions[brand]
.push([
'Dec-' + columns[4][i],
columns[1][i]
]);
} else {
versions[brand]
.push([
'others',
columns[1][i]
]);
}
}
}
});
$.each(brands, function(name, y) {
var data = y;
var arr = data.split('@@');
brandsData.push({
name: name,
p: name,
dataLabels: {
enabled: true,
align: 'center',
style: {
fontWeight: 'bold'
}
},
y: parseInt(arr[0]),
z: parseInt(arr[1]),
a: arr[2],
drilldown: versions[name] ? name : null
});
});
$.each(brands, function(name, y) {
var data = y;
var arr = data.split('@@');
cpcData.push({
name: name,
a: arr[2],
p: name,
y: parseInt(arr[1]),
z: parseInt(arr[0]),
});
});
$.each(versions, function(key, value) {
drilldownSeries.push({
name: key,
id: key,
data: value,
});
});
// Create the chart
$container
.highcharts({
chart: {
type: 'column'
},
title: {
text: 'Suggested Keywords'
},
subtitle: {
text: 'Click the columns to view Monthly Searches. Source: Google Adwords.'
},
xAxis: {
type: 'category'
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value} Rs',
style: {
color: 'GREEN'
}
},
title: {
text: 'CPC',
style: {
color: 'GREEN'
}
}
}, { // Secondary yAxis
type: 'logarithmic',
minorTickInterval: 0.01,
title: {
text: 'Search Volume',
style: {
color: '#00557F'
}
},
labels: {
format: '{value}',
style: {
color: '#00557F'
}
},
opposite: false
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.0f}',
color: '{series.color}',
rotation: -45,
y: -10
}
}
}
,
tooltip: {
shared: true,
headerFormat: '',
pointFormat: '<span style="color:Red;font-size:15px">{point.name}</span>: {series.name}:-<b style="font-size:15px;color:{point.color}">{point.y:.0f} <div style="color:black">{point.a}</div></b><br/>',
},
series: [{
name: 'CPC',
colorByPoint: false,
color: 'GREEN',
type: 'spline',
marker: {
symbol: 'circle',
color: 'RED'
},
tooltip: {
valueSuffix: ''
},
data: cpcData
}, {
name: 'Search Volume',
yAxis: 1,
colorByPoint: false,
color: '#00557F',
tooltip: {
valueSuffix: 'Rs'
},
data: brandsData
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
align: 'left',
x: 30
}
},
series: drilldownSeries
}
});
chart = $container.highcharts();
$('<button>+</button>').insertBefore($container).click(function() {
chartWidth *= 1.1;
chartHeight *= 1.1;
chart.setSize(chartWidth, chartHeight);
});
$('<button>-</button>').insertBefore($container).click(function() {
chartWidth *= 0.9;
chartHeight *= 0.9;
chart.setSize(chartWidth, chartHeight);
});
$('<button>Default</button>').insertBefore($container).click(function() {
chartWidth = origChartWidth;
chartHeight = origChartHeight;
chart.setSize(origChartWidth, origChartHeight);
});
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version Total Market Share month search volume year competition
samsung note 4@@2.0 90500% 9.6* 74000* 2015* HIGH*
samsung note 4@@1.0 110000% 9.6* 74000* 2015* HIGH*
samsung note 4@@12.0 135000% 9.6* 74000* 2014* HIGH*
samsung note 4@@11.0 165000% 9.6* 74000* 2014* HIGH*
samsung note 4@@10.0 165000% 9.6* 74000* 2014* HIGH*
samsung note 4@@9.0 135000% 9.6* 74000* 2014* HIGH*
samsung note 4@@8.0 49500% 9.6* 74000* 2014* HIGH*
samsung note 4@@7.0 22200% 9.6* 74000* 2014* HIGH*
samsung note 4@@6.0 14800% 9.6* 74000* 2014* HIGH*
samsung note 4@@5.0 9900% 9.6* 74000* 2014* HIGH*
samsung note 4@@4.0 8100% 9.6* 74000* 2014* HIGH*
samsung note 4@@3.0 5400% 9.6* 74000* 2014* HIGH*
samsung note 4 price@@2.0 8100% 8.7* 9900* 2015* HIGH*
samsung note 4 price@@1.0 12100% 8.7* 9900* 2015* HIGH*
samsung note 4 price@@12.0 14800% 8.7* 9900* 2014* HIGH*
samsung note 4 price@@11.0 18100% 8.7* 9900* 2014* HIGH*
samsung note 4 price@@10.0 27100% 8.7* 9900* 2014* HIGH*
samsung note 4 price@@9.0 27100% 8.7* 9900* 2014* HIGH*
samsung note 4 price@@8.0 5400% 8.7* 9900* 2014* HIGH*
samsung note 4 price@@7.0 2400% 8.7* 9900* 2014* HIGH*
samsung note 4 price@@6.0 1900% 8.7* 9900* 2014* HIGH*
samsung note 4 price@@5.0 1300% 8.7* 9900* 2014* HIGH*
samsung note 4 price@@4.0 1000% 8.7* 9900* 2014* HIGH*
samsung note 4 price@@3.0 720% 8.7* 9900* 2014* HIGH*
price of samsung note 4@@2.0 880% 14.9* 720* 2015* MEDIUM*
price of samsung note 4@@1.0 1000% 14.9* 720* 2015* MEDIUM*
price of samsung note 4@@12.0 1300% 14.9* 720* 2014* MEDIUM*
price of samsung note 4@@11.0 1900% 14.9* 720* 2014* MEDIUM*
price of samsung note 4@@10.0 1600% 14.9* 720* 2014* MEDIUM*
price of samsung note 4@@9.0 1000% 14.9* 720* 2014* MEDIUM*
price of samsung note 4@@8.0 170% 14.9* 720* 2014* MEDIUM*
price of samsung note 4@@7.0 90% 14.9* 720* 2014* MEDIUM*
price of samsung note 4@@6.0 70% 14.9* 720* 2014* MEDIUM*
price of samsung note 4@@5.0 40% 14.9* 720* 2014* MEDIUM*
price of samsung note 4@@4.0 40% 14.9* 720* 2014* MEDIUM*
price of samsung note 4@@3.0 40% 14.9* 720* 2014* MEDIUM*
samsung note 4 specification@@2.0 2400% 10.0* 2400* 2015* LOW*
samsung note 4 specification@@1.0 2900% 10.0* 2400* 2015* LOW*
samsung note 4 specification@@12.0 3600% 10.0* 2400* 2014* LOW*
samsung note 4 specification@@11.0 4400% 10.0* 2400* 2014* LOW*
samsung note 4 specification@@10.0 5400% 10.0* 2400* 2014* LOW*
samsung note 4 specification@@9.0 5400% 10.0* 2400* 2014* LOW*
samsung note 4 specification@@8.0 1600% 10.0* 2400* 2014* LOW*
samsung note 4 specification@@7.0 1000% 10.0* 2400* 2014* LOW*
samsung note 4 specification@@6.0 2400% 10.0* 2400* 2014* LOW*
samsung note 4 specification@@5.0 1600% 10.0* 2400* 2014* LOW*
samsung note 4 specification@@4.0 720% 10.0* 2400* 2014* LOW*
samsung note 4 specification@@3.0 480% 10.0* 2400* 2014* LOW*
samsung note 4 india@@2.0 260% 5.3* 590* 2015* HIGH*
samsung note 4 india@@1.0 320% 5.3* 590* 2015* HIGH*
samsung note 4 india@@12.0 590% 5.3* 590* 2014* HIGH*
samsung note 4 india@@11.0 880% 5.3* 590* 2014* HIGH*
samsung note 4 india@@10.0 3600% 5.3* 590* 2014* HIGH*
samsung note 4 india@@9.0 1600% 5.3* 590* 2014* HIGH*
samsung note 4 india@@8.0 90% 5.3* 590* 2014* HIGH*
samsung note 4 india@@7.0 0% 5.3* 590* 2014* HIGH*
samsung note 4 india@@6.0 0% 5.3* 590* 2014* HIGH*
samsung note 4 india@@5.0 0% 5.3* 590* 2014* HIGH*
samsung note 4 india@@4.0 0% 5.3* 590* 2014* HIGH*
samsung note 4 india@@3.0 0% 5.3* 590* 2014* HIGH*
samsung note 4 price in india@@2.0 22200% 9.5* 18100* 2015* MEDIUM*
samsung note 4 price in india@@1.0 27100% 9.5* 18100* 2015* MEDIUM*
samsung note 4 price in india@@12.0 33100% 9.5* 18100* 2014* MEDIUM*
samsung note 4 price in india@@11.0 33100% 9.5* 18100* 2014* MEDIUM*
samsung note 4 price in india@@10.0 40500% 9.5* 18100* 2014* MEDIUM*
samsung note 4 price in india@@9.0 33100% 9.5* 18100* 2014* MEDIUM*
samsung note 4 price in india@@8.0 9900% 9.5* 18100* 2014* MEDIUM*
samsung note 4 price in india@@7.0 4400% 9.5* 18100* 2014* MEDIUM*
samsung note 4 price in india@@6.0 1900% 9.5* 18100* 2014* MEDIUM*
samsung note 4 price in india@@5.0 1000% 9.5* 18100* 2014* MEDIUM*
samsung note 4 price in india@@4.0 1000% 9.5* 18100* 2014* MEDIUM*
samsung note 4 price in india@@3.0 1300% 9.5* 18100* 2014* MEDIUM*
samsung note 4 mobile@@2.0 390% 14.4* 390* 2015* MEDIUM*
samsung note 4 mobile@@1.0 590% 14.4* 390* 2015* MEDIUM*
samsung note 4 mobile@@12.0 590% 14.4* 390* 2014* MEDIUM*
samsung note 4 mobile@@11.0 720% 14.4* 390* 2014* MEDIUM*
samsung note 4 mobile@@10.0 880% 14.4* 390* 2014* MEDIUM*
samsung note 4 mobile@@9.0 1000% 14.4* 390* 2014* MEDIUM*
samsung note 4 mobile@@8.0 320% 14.4* 390* 2014* MEDIUM*
samsung note 4 mobile@@7.0 170% 14.4* 390* 2014* MEDIUM*
samsung note 4 mobile@@6.0 110% 14.4* 390* 2014* MEDIUM*
samsung note 4 mobile@@5.0 70% 14.4* 390* 2014* MEDIUM*
samsung note 4 mobile@@4.0 70% 14.4* 390* 2014* MEDIUM*
samsung note 4 mobile@@3.0 70% 14.4* 390* 2014* MEDIUM*
price of samsung note 4 in india@@2.0 590% 14.2* 720* 2015* MEDIUM*
price of samsung note 4 in india@@1.0 880% 14.2* 720* 2015* MEDIUM*
price of samsung note 4 in india@@12.0 1600% 14.2* 720* 2014* MEDIUM*
price of samsung note 4 in india@@11.0 1600% 14.2* 720* 2014* MEDIUM*
price of samsung note 4 in india@@10.0 1900% 14.2* 720* 2014* MEDIUM*
price of samsung note 4 in india@@9.0 1600% 14.2* 720* 2014* MEDIUM*
price of samsung note 4 in india@@8.0 170% 14.2* 720* 2014* MEDIUM*
price of samsung note 4 in india@@7.0 70% 14.2* 720* 2014* MEDIUM*
price of samsung note 4 in india@@6.0 70% 14.2* 720* 2014* MEDIUM*
price of samsung note 4 in india@@5.0 40% 14.2* 720* 2014* MEDIUM*
price of samsung note 4 in india@@4.0 30% 14.2* 720* 2014* MEDIUM*
price of samsung note 4 in india@@3.0 0% 14.2* 720* 2014* MEDIUM*
samsung note 4 in india@@2.0 90% 8.7* 320* 2015* HIGH*
samsung note 4 in india@@1.0 140% 8.7* 320* 2015* HIGH*
samsung note 4 in india@@12.0 210% 8.7* 320* 2014* HIGH*
samsung note 4 in india@@11.0 260% 8.7* 320* 2014* HIGH*
samsung note 4 in india@@10.0 1600% 8.7* 320* 2014* HIGH*
samsung note 4 in india@@9.0 1000% 8.7* 320* 2014* HIGH*
samsung note 4 in india@@8.0 140% 8.7* 320* 2014* HIGH*
samsung note 4 in india@@7.0 50% 8.7* 320* 2014* HIGH*
samsung note 4 in india@@6.0 50% 8.7* 320* 2014* HIGH*
samsung note 4 in india@@5.0 20% 8.7* 320* 2014* HIGH*
samsung note 4 in india@@4.0 20% 8.7* 320* 2014* HIGH*
samsung note 4 in india@@3.0 10% 8.7* 320* 2014* HIGH*
samsung note 4 gsmarena@@2.0 260% 47.1* 390* 2015* LOW*
samsung note 4 gsmarena@@1.0 320% 47.1* 390* 2015* LOW*
samsung note 4 gsmarena@@12.0 390% 47.1* 390* 2014* LOW*
samsung note 4 gsmarena@@11.0 480% 47.1* 390* 2014* LOW*
samsung note 4 gsmarena@@10.0 720% 47.1* 390* 2014* LOW*
samsung note 4 gsmarena@@9.0 1000% 47.1* 390* 2014* LOW*
samsung note 4 gsmarena@@8.0 720% 47.1* 390* 2014* LOW*
samsung note 4 gsmarena@@7.0 320% 47.1* 390* 2014* LOW*
samsung note 4 gsmarena@@6.0 210% 47.1* 390* 2014* LOW*
samsung note 4 gsmarena@@5.0 70% 47.1* 390* 2014* LOW*
samsung note 4 gsmarena@@4.0 50% 47.1* 390* 2014* LOW*
samsung note 4 gsmarena@@3.0 20% 47.1* 390* 2014* LOW*
samsung note 4 with price@@2.0 50% 5.0* 40* 2015* HIGH*
samsung note 4 with price@@1.0 70% 5.0* 40* 2015* HIGH*
samsung note 4 with price@@12.0 110% 5.0* 40* 2014* HIGH*
samsung note 4 with price@@11.0 90% 5.0* 40* 2014* HIGH*
samsung note 4 with price@@10.0 70% 5.0* 40* 2014* HIGH*
samsung note 4 with price@@9.0 50% 5.0* 40* 2014* HIGH*
samsung note 4 with price@@8.0 20% 5.0* 40* 2014* HIGH*
samsung note 4 with price@@7.0 0% 5.0* 40* 2014* HIGH*
samsung note 4 with price@@6.0 0% 5.0* 40* 2014* HIGH*
samsung note 4 with price@@5.0 0% 5.0* 40* 2014* HIGH*
samsung note 4 with price@@4.0 0% 5.0* 40* 2014* HIGH*
samsung note 4 with price@@3.0 0% 5.0* 40* 2014* HIGH*
</pre>
单击样条曲线下方不起作用的部分。帮助!!