Highcharts三重Drilldown圆角落插件臭虫 [英] Highcharts Triple Drilldown Round Corners Plugin Bug
本文介绍了Highcharts三重Drilldown圆角落插件臭虫的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题：第三级钻取错误。
目标：使其成功。
//jsfiddle.net/32a7L41b/rel =nofollow> http://jsfiddle.net/32a7L41b/ 点击阿拉斯加，然后点击Wave 1，你会看到错误。显然这些数据并不真实。 //修改后的Highcharts圆角插件
（function（H）{
var curPercentage = [];
H.wrap（H.seriesTypes.column.prototype，'translate'，function（proceed）{
var options = this.options，
rTopLeft = options.borderRadiusTopLeft || 0，
rTopRight = options.borderRadiusTopRight || 0，
rBottomRight = options.borderRadiusBottomRight || 0，
rBottomLeft = options.borderRadiusBottomLeft || 0，
topMargin = options.topMargin || 0，
bottomMargin = options.bottomMargin || 0;
proceed.call（this）;
if （rTopLeft || rTopRight || rBottomRight || rBottomLeft）{
H.each（this.points，function（point）{
var iBottomRight = rBottomRight，
iBottomLeft = rBot tomLeft，
iTopRight = rTopRight，
iTopLeft = rTopLeft;
//console.log（point）;
if（typeof（curPercentage [point.index]）=='undefined'）{
curPercentage [point.index] = 0;
}
var prevPercentage = curPercentage [point.index];
curPercentage [point.index] + = 1.0 * parseFloat（point.percentage）.toFixed（6）;
//console.log(prevPercentage）;
//console.log（curPercentage）;
if（prevPercentage == 0& curPercentage [point.index] == 100）{
//特殊情况，只有一个值> 0，保留所有边界半径
//为下一次调用重置
curPercentage [point.index] = 0;
} else if（prevPercentage == 0）{
//右侧
iBottomRight = 0;
iBottomLeft = 0;
} else if（curPercentage [point.index] == 100）{
//左边
iTopRight = 0;
iTopLeft = 0;
//为下一次调用重置
curPercentage [point.index] = 0;
} else {
//无半径
iBottomRight = 0;
iBottomLeft = 0;
iTopRight = 0;
iTopLeft = 0;
}
var shapeArgs = point.shapeArgs，
w = shapeArgs.width，
h = shapeArgs.height，$ b $ = shapeArgs.x，
y = shapeArgs.y;
//保留数据标签的框
point.dlBox = point.shapeArgs;
point.shapeType ='path';
point.shapeArgs = {
d：[
'M'，x + iTopLeft，y + topMargin，
//顶端
'L'，x + w - iTopRight，y + topMargin，
//右上角
'C'，x + w - iTopRight / 2，y，x + w，y + iTopRight / 2，x + w，y + iTopRight，
//右侧
'L'，x + w，y + h - iBottomRight，
//右下角
'C'，x + w，y + h - iBottomRight / 2，x + w - iBottomRight / 2，y + h，x + w - iBottomRight，y + h + bottomMargin，
//底部
'L'，x + iBottomLeft ，y + h + bottomMargin，
//左下角
'C'，x + iBottomLeft / 2，y + h，x，y + h - iBottomLeft / 2， x，y + h - iBottomLeft，
//左侧
'L'，x，y + iTopLeft，
//左上角
'C'，x，y + iTopLeft / 2，x + iTopLeft / 2，y，x + iTopLeft，y，
'Z']
};
}）;
}
}）;
}（Highcharts））;
解决方案
好的，我必须修改 drilldown.js 来支持保存在 point.dlBox
Chart.prototype.addSingleSeriesAsDrilldown = function（point，ddOptions）{
///（...）
//为每个深入级别添加属性记录
level = {
levelNumber：levelNumber，
seriesOptions：oldSeries.options，
levelSeriesOptions：levelSeriesOptions，
levelSeries：levelSeries，
shapeArgs：point.dlBox || point.shapeArgs，//< == here
I am using a modified version of the Highcharts Round Corners Plugin thanks to @davcs86. And on the third level of a drilldown there is a bug. I was hoping someone could assist.
Issue: the third level in drill down errors out.
Goal: Make it work.
Bug Demo: http://jsfiddle.net/32a7L41b/ Click on Alaska and then Wave 1 and you will see the bug. Obviously the data is not real.
//Modified Highcharts Round Corners plugin
(function (H) {
var curPercentage = [];
H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) {
var options = this.options,
rTopLeft = options.borderRadiusTopLeft || 0,
rTopRight = options.borderRadiusTopRight || 0,
rBottomRight = options.borderRadiusBottomRight || 0,
rBottomLeft = options.borderRadiusBottomLeft || 0,
topMargin = options.topMargin || 0,
bottomMargin = options.bottomMargin || 0;
proceed.call(this);
if (rTopLeft || rTopRight || rBottomRight || rBottomLeft) {
H.each(this.points, function (point) {
var iBottomRight = rBottomRight,
iBottomLeft = rBottomLeft,
iTopRight = rTopRight,
iTopLeft = rTopLeft;
//console.log(point);
if (typeof (curPercentage[point.index]) == 'undefined') {
curPercentage[point.index] = 0;
}
var prevPercentage = curPercentage[point.index];
curPercentage[point.index] += 1.0 * parseFloat(point.percentage).toFixed(6);
//console.log(prevPercentage);
//console.log(curPercentage);
if (prevPercentage == 0 & curPercentage[point.index] == 100) {
// special case, only one value > 0, preserve all border radius
// reset for the next call
curPercentage[point.index] = 0;
} else if (prevPercentage == 0) {
//right side
iBottomRight = 0;
iBottomLeft = 0;
} else if (curPercentage[point.index] == 100) {
//left side
iTopRight = 0;
iTopLeft = 0;
// reset for the next call
curPercentage[point.index] = 0;
} else {
// no radius
iBottomRight = 0;
iBottomLeft = 0;
iTopRight = 0;
iTopLeft = 0;
}
var shapeArgs = point.shapeArgs,
w = shapeArgs.width,
h = shapeArgs.height,
x = shapeArgs.x,
y = shapeArgs.y;
// Preserve the box for data labels
point.dlBox = point.shapeArgs;
point.shapeType = 'path';
point.shapeArgs = {
d: [
'M', x + iTopLeft, y + topMargin,
// top side
'L', x + w - iTopRight, y + topMargin,
// top right corner
'C', x + w - iTopRight / 2, y, x + w, y + iTopRight / 2, x + w, y + iTopRight,
// right side
'L', x + w, y + h - iBottomRight,
// bottom right corner
'C', x + w, y + h - iBottomRight / 2, x + w - iBottomRight / 2, y + h, x + w - iBottomRight, y + h + bottomMargin,
// bottom side
'L', x + iBottomLeft, y + h + bottomMargin,
// bottom left corner
'C', x + iBottomLeft / 2, y + h, x, y + h - iBottomLeft / 2, x, y + h - iBottomLeft,
// left side
'L', x, y + iTopLeft,
// top left corner
'C', x, y + iTopLeft / 2, x + iTopLeft / 2, y, x + iTopLeft, y,
'Z']
};
});
}
});
}(Highcharts));
解决方案
Well, I had to modify drilldown.js to support the data saved in point.dlBox
Chart.prototype.addSingleSeriesAsDrilldown = function (point, ddOptions) {
/// (...)
// Add a record of properties for each drilldown level
level = {
levelNumber: levelNumber,
seriesOptions: oldSeries.options,
levelSeriesOptions: levelSeriesOptions,
levelSeries: levelSeries,
shapeArgs: point.dlBox || point.shapeArgs, // <== here
这篇关于Highcharts三重Drilldown圆角落插件臭虫的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
