Highcharts三重下钻圆角插件Bug
Highcharts Triple Drilldown Round Corners Plugin Bug
我正在使用Highcharts圆角插件的修改版本,感谢@davcs86。在向下钻取的第三层有一个bug。我希望有人能帮忙。
问题:第三层中钻出错误。
目标: Make it work.
Bug Demo: http://jsfiddle.net/32a7L41b/点击阿拉斯加,然后点击Wave 1,你会看到Bug。显然这些数据不是真实的。
//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));
嗯,我必须修改drilldown.js
以支持保存在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
JSFiddle演示
drilldown: {
series: [{
borderRadius: 7, // <----------
id: 'alaskawaves',
name: 'Alaska Waves',
我通过在系列对象中添加borderRadius: 7得到了它的工作。如果你看到任何向下钻的条为正方形,只需在相关的系列对象中添加这个borderRadius。
示例:
http://jsfiddle.net/ht1u0og2/相关文章:
- 如何在Angular2中使用jQuery插件
- 可以前端maven插件使用节点,npm已经安装
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 我的jQuery插件参数没有正确启动,遇到了问题
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- TableExport jquery插件:文件名和扩展名问题
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- jQuery插件-从插件中调用公共方法
- 压缩phonegap中ios的图像插件
- jQuery粘性插件可变顶部间距
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 高亮显示与数组字符串一起使用时文本插件中断
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- Wordpress插件根据需要加载js和css
- jQuery Wan Spinner插件的多个字段
- jQuery Facebox插件:关注弹出的外观
- 有没有一个 JQuery 插件可以做 CSS3 圆角
- Highcharts三重下钻圆角插件Bug
- 什么是最具跨浏览器一致性的jQuery插件,用于在没有图像的HTML元素上渲染圆角