Highcharts Multi-Depth 3d круговая диаграмма

Question

Итак, я собираюсь создать трехмерную круговую диаграмму (в Highcharts), где глубина каждого среза определяется значением точки.Вопрос здесь должен дать вам хорошее представление о том, к чему я стремлюсь.

В настоящее время Highcharts поддерживает только аргументы глубины на уровне серии, поэтому моей первой идеей было сделать несколько серий,как показано здесь: # 1 .

1:

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 60
    }
  },
  title: {
    text: 'Contents of Highsoft\'s weekly fruit delivery'
  },
  subtitle: {
    text: '3D donut in Highcharts'
  },
  plotOptions: {
    pie: {
      innerSize: 125,
      depth: 60
    }
  },
  series: [{
    name: 'Delivered amount',
    data: [
      { name: 'a', y: 1, val: 0.59, color: '#25683d' },
      { name: 'b', y: 1, val: 1.25, color: '#222f58' },
      { name: 'c', y: 2, val: 0.73, color: '#bebe89' },
      
    ],
    depth: 45,
    startAngle: 0,
    endAngle: 180
  }, {
    data: [
      { name: 'd', y: 2, val: -0.69, color: '#900' },
      { name: 'e', y: 2, val: 0.57, color: '#a0a0a0' }
    ],
		depth: 60,
    startAngle: 180,
    endAngle: 360
  }]
});

<script src="https://code.highcharts.com/highcharts.js">
</script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="height: 400px"></div>

• Проблема заключается в том, что глубина, по-видимому, сохраняет ту же самую верхнюю контрольную точку вместо ожидаемых результатов, в которых каждый «срез» начинается ста же самая точка y.

Когда это не сработало, я вернулся к сохранению всех данных в одной серии и попытался обновить глубину элементов SVG после рендеринга (как можно увидеть здесь: # 2 .

2:

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 60
    },
    events: {
      load: function() {
        this.series[0].data.forEach((val, i) => {
          var depth = val.graphic.attribs.depth;
          val.graphic.attribs.depth = depth + (i * 10);
        });
        this.redraw();
      }
    }
  },
  title: {
    text: 'Contents of Highsoft\'s weekly fruit delivery'
  },
  subtitle: {
    text: '3D donut in Highcharts'
  },
  plotOptions: {
    pie: {
      innerSize: 125,
      depth: 60
    }
  },
  series: [{
    name: 'Delivered amount',
    data: [{
        name: 'a',
        y: 1,
        val: 0.59,
        color: '#25683d'
      },
      {
        name: 'b',
        y: 1,
        val: 1.25,
        color: '#222f58'
      },
      {
        name: 'c',
        y: 2,
        val: 0.73,
        color: '#bebe89'
      },
      {
        name: 'd',
        y: 2,
        val: -0.69,
        color: '#900'
      },
      {
        name: 'e',
        y: 2,
        val: 0.57,
        color: '#a0a0a0'
      }

    ],

  }]
});

• Еще раз, глубина, кажется, просто добавляет содержимое вниз, и мои попытки перевода (https://api.highcharts.com/class-reference/Highcharts.SVGElement#translate), чтобы сдвинуть каждый фрагмент вверхбыли менее чем успешны в поддержании эстетически приятного графика .. например: # 3 .

  • также стоит отметить, что мне пришлось определить массив для переводов y, которыйбыли в основном результаты проб и ошибок

3:

Highcharts.chart('container', {
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 60
    },
    events: {
      load: function() {
        this.series[0].data.forEach((val, i) => {
          var depth = val.graphic.attribs.depth;
          val.graphic.attribs.depth = depth + (i * 10);
        });
        this.redraw();
      },
      redraw: function() {
        var y_trans = [0, -8, -16, -25, -34];
        this.series[0].data.forEach((val, i) => {
          val.graphic.translate(0, y_trans[i]);
        });
      }
    }
  },
  title: {
    text: 'Contents of Highsoft\'s weekly fruit delivery'
  },
  subtitle: {
    text: '3D donut in Highcharts'
  },
  plotOptions: {
    pie: {
      innerSize: 125,
      depth: 60
    }
  },
  series: [{
    name: 'Delivered amount',
    data: [{
        name: 'a',
        y: 1,
        val: 0.59,
        color: '#25683d'
      },
      {
        name: 'b',
        y: 1,
        val: 1.25,
        color: '#222f58'
      },
      {
        name: 'c',
        y: 2,
        val: 0.73,
        color: '#bebe89'
      },
      {
        name: 'd',
        y: 2,
        val: -0.69,
        color: '#900'
      },
      {
        name: 'e',
        y: 2,
        val: 0.57,
        color: '#a0a0a0'
      }

    ],

  }]
});

Буду признателен за любые ссылки или идеи, когда я начну биться в стену.

Answer 1

Вы можете использовать Highcharts wrap и расширять translate метод:

var each = Highcharts.each,
    round = Math.round,
    cos = Math.cos,
    sin = Math.sin,
    deg2rad = Math.deg2rad;

Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
    proceed.apply(this, [].slice.call(arguments, 1));

    // Do not do this if the chart is not 3D
    if (!this.chart.is3d()) {
        return;
    }

    var series = this,
        chart = series.chart,
        options = chart.options,
        seriesOptions = series.options,
        depth = seriesOptions.depth || 0,
        options3d = options.chart.options3d,
        alpha = options3d.alpha,
        beta = options3d.beta,
        z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;

    z += depth / 2;

    if (seriesOptions.grouping !== false) {
        z = 0;
    }

    each(series.data, function(point) {

        var shapeArgs = point.shapeArgs,
            angle;

        point.shapeType = 'arc3d';

        var ran = point.options.h;

        shapeArgs.z = z;
        shapeArgs.depth = depth * 0.75 + ran;
        shapeArgs.alpha = alpha;
        shapeArgs.beta = beta;
        shapeArgs.center = series.center;
        shapeArgs.ran = ran;

        angle = (shapeArgs.end + shapeArgs.start) / 2;

        point.slicedTranslation = {
            translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
            translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
        };
    });
});

(function(H) {
    H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
        // Run original proceed method
        var ret = proceed.apply(this, [].slice.call(arguments, 1));
        ret.zTop = (ret.zOut + 0.5) / 100;
        return ret;
    });
}(Highcharts));

Также, в load событии вам нужно повернуть график:

        events: {
            load: function() {
                var each = Highcharts.each,
                    points = this.series[0].points;

                each(points, function(p, i) {
                    p.graphic.attr({
                        translateY: -p.shapeArgs.ran
                    });

                    p.graphic.side1.attr({
                        translateY: -p.shapeArgs.ran
                    });

                    p.graphic.side2.attr({
                        translateY: -p.shapeArgs.ran
                    });
                });
            }
        }

Liveдемо: http://jsfiddle.net/BlackLabel/c4wk5z9L/

Документы: https://www.highcharts.com/docs/extending-highcharts