时间戳

首页 > 解决方案 > Highcharts 负值柱形图底部半径

highcharts - Highcharts 负值柱形图底部半径

问题描述

我有包含正值和负值柱形图的柱形图，我只需要为正负图给出边界半径顶部。但是，如果我尝试为负柱形图添加边界半径顶部，则它不起作用。请让我知道如何在 react js 中使用 highcharts 为负柱形图提供唯一的边界半径顶部。

参考图片在这里

例如，在提供的图像中，对于负值，我希望边框半径为 -5%。对于正值，我希望边框半径位于条形顶部。

标签： highcharts

解决方案

我准备了一个自定义代码，在列的底部为正值添加所需的边界半径 - 在顶部，对于负值。

$(function() {
  'use strict';
  (function(factory) {
    if (typeof module === 'object' && module.exports) {
      module.exports = factory;
    } else {
      factory(Highcharts);
    }
  }(function(Highcharts) {
    (function(H) {
      H.wrap(H.seriesTypes.column.prototype, 'translate', function(proceed) {
        const options = this.options;
        const topMargin = options.topMargin || 0;
        const bottomMargin = options.bottomMargin || 0;

        proceed.call(this);

        H.each(this.points, function(point) {
          console.log(point)
          if (options.customRadius) {
            const w = point.shapeArgs.width;
            const h = point.shapeArgs.height;
            const x = point.shapeArgs.x;
            const y = point.shapeArgs.y;

            let radiusTopLeft,
              radiusTopRight,
              radiusBottomRight,
              radiusBottomLeft;

            if (point.y > 0) {
              radiusTopLeft = H.relativeLength(options.customRadius, w);
              radiusTopRight = H.relativeLength(options.customRadius, w);
              radiusBottomLeft = 0;
              radiusBottomRight = 0;
            } else {
              radiusTopLeft = 0;
              radiusTopRight = 0;
              radiusBottomRight = H.relativeLength(options.customRadius, w);
              radiusBottomLeft = H.relativeLength(options.customRadius, w);
            }

            const maxR = Math.min(w, h) / 2

            radiusTopLeft = radiusTopLeft > maxR ? maxR : radiusTopLeft;
            radiusTopRight = radiusTopRight > maxR ? maxR : radiusTopRight;
            radiusBottomRight = radiusBottomRight > maxR ? maxR : radiusBottomRight;
            radiusBottomLeft = radiusBottomLeft > maxR ? maxR : radiusBottomLeft;

            point.dlBox = point.shapeArgs;

            point.shapeType = 'path';
            point.shapeArgs = {
              d: [
                'M', x + radiusTopLeft, y + topMargin,
                'L', x + w - radiusTopRight, y + topMargin,
                'C', x + w - radiusTopRight / 2, y, x + w, y + radiusTopRight / 2, x + w, y + radiusTopRight,
                'L', x + w, y + h - radiusBottomRight,
                'C', x + w, y + h - radiusBottomRight / 2, x + w - radiusBottomRight / 2, y + h, x + w - radiusBottomRight, y + h + bottomMargin,
                'L', x + radiusBottomLeft, y + h + bottomMargin,
                'C', x + radiusBottomLeft / 2, y + h, x, y + h - radiusBottomLeft / 2, x, y + h - radiusBottomLeft,
                'L', x, y + radiusTopLeft,
                'C', x, y + radiusTopLeft / 2, x + radiusTopLeft / 2, y, x + radiusTopLeft, y,
                'Z'
              ]
            };
          }

        });
      });
    }(Highcharts));
  }));

演示：http: //jsfiddle.net/BlackLabel/okn8qhdb/

推荐阅读