Установите радиус границы влево / вправо для столбцов в Highcharts

1

Есть ли способ установить радиус границы для левых/правых областей столбца? Я довольно близко, но мне нужна небольшая корректировка, так как мне не нужен радиус границы для обеих сторон, только один из них.

Я бы хотел, чтобы обе стороны встретились, как первый пример, но не имеют границую границу на концах, которые они встречают (так что они хорошо сочетаются), вместо того, чтобы перекрываться, как вторая часть этого первого примера.

Вот код:

http://jsfiddle.net/6qsvjark/600/

    series: [{
        name: 'Task 1',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 7,
            high: 8
        }, {
            x: 1,
            low: 6.5,
            high: 7.75
        }],
        borderRadius: 10,
        borderWidth: 0
    }, {
        name: 'Task 2',
        stack: 'Tasks',
        data: [{
            x: 0,
            low: 8,
            high: 9
        }, {
            x: 1,
            low: 7.5,
            high: 8.5
        }],
        borderRadius: 10,
        borderWidth: 0
    }]
  • 0
    Может быть, этот плагин для пользовательских границ: github.com/bellstrand/highcharts-border-radius
  • 0
    Я попробовал это, не похоже на работу, также больше не было в репозитории npm, jsfiddle.net/6qsvjark/601
Теги:
highcharts

1 ответ

2
Лучший ответ

Пользовательский плагин, упомянутый @Matias Cerrotta, работает только после того, как он модифицирован для работы с диаграммами columnrange.

JS

$(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.columnrange.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) {
          if (options.borderRadiusTopLeft || options.borderRadiusTopRight || options.borderRadiusBottomRight || options.borderRadiusBottomLeft) {
            const w = point.shapeArgs.width;
            const h = point.shapeArgs.height;
            const x = point.shapeArgs.x;
            const y = point.shapeArgs.y;

            let radiusTopLeft = H.relativeLength(options.borderRadiusTopLeft || 0, w);
            let radiusTopRight = H.relativeLength(options.borderRadiusTopRight || 0, w);
            let radiusBottomRight = H.relativeLength(options.borderRadiusBottomRight || 0, w);
            let radiusBottomLeft = H.relativeLength(options.borderRadiusBottomLeft || 0, 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));
  }));
  window.chart1 = new Highcharts.Chart({

    chart: {
      renderTo: 'container1',
      type: 'columnrange',
      inverted: true
    },

    title: {
      text: "Top Chart"
    },

    xAxis: {
      categories: ['Customer A', 'Customer B']
    },


    legend: {
      enabled: true
    },

    plotOptions: {
      columnrange: {
        grouping: false,


      }
    },

    series: [{
      name: 'Task 1',
      stack: 'Tasks',
      borderRadiusBottomLeft: 10,
      borderRadiusBottomRight: 10,
      data: [{
        x: 0,
        low: 7,
        high: 8
      }, {
        x: 1,
        low: 6.5,
        high: 7.75
      }],

    }, {
      name: 'Task 2',
      stack: 'Tasks',
      borderRadiusTopLeft: 10,
      borderRadiusTopRight: 10,
      data: [{
        x: 0,
        low: 8,
        high: 9
      }, {
        x: 1,
        low: 7.5,
        high: 8.5
      }],

    }]

  });

  window.chart2 = new Highcharts.Chart({

    chart: {
      renderTo: 'container2',
      type: 'columnrange',
      inverted: true
    },

    title: {
      text: "Bottom Chart"
    },

    xAxis: {
      categories: ['Customer A', 'Customer B']
    },


    legend: {
      enabled: true
    },

    series: [{
      name: 'Data',
      data: [{
        x: 0,
        low: 7,
        high: 8
      }, {
        x: 0,
        low: 8,
        high: 9,
        color: "#202020"
      }, {
        x: 1,
        low: 6.5,
        high: 7.5
      }, {
        x: 1,
        low: 7.5,
        high: 8.5,
        color: "#202020"
      }]
    }]

  });

});

Скрипка демонстрации

Поделиться
  • 0
    Спасибо! Я посмотрю позже сегодня
  • 0
    Это работает, спасибо за исправление, извините, это заняло несколько дней!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню