Изменение круговой диаграммы в кольцевую диаграмму со стрелкой - PullRequest
Новая
       17

Изменение круговой диаграммы в кольцевую диаграмму со стрелкой

0 голосов
/ 22 октября 2018

Я новичок в визуализации данных.Я хотел бы настроить круговую диаграмму, чтобы получить кольцевую диаграмму со стрелками, как на рисунке ниже.Спасибо за вашу помощь

Arrow Ring Chart

1 Ответ

0 голосов
/ 22 октября 2018

Круговая диаграмма Highcharts может быть настроена на кольцевую диаграмму со стрелкой.Это требует немного пользовательского кода, но может быть сделано.Я подготовил вам пример кольцевой диаграммы, где я добавил пользовательский символ (подробнее о пользовательских символах здесь ), кроме того, я переписал H.SVGRenderer.prototype.arc, чтобы использовать свой собственный символ вместо символа по умолчанию (дуга вкруговая диаграмма).

Итак, что вы должны добавить, это путь кольца со стрелкой (вместо дуги), который является основной проблемой, которую нужно решить.Высокие диаграммы будут использовать этот символ для построения каждой точки (кольцо со стрелкой).Попробуйте добавить дополнительный путь к существующему пути дуги начала и конца каждой точки.Это немного сложно, потому что вам придется вычислять крайние точки каждого среза (точки графика) и угла, чтобы отобразить соответствующий путь (начальная или конечная стрелка).

Проверьте демонстрацию, которую я разместил ниже, и попробуйтеизмените массив arc, чтобы узнать, о чем я говорю.Проверьте также описание из Highcharts.SVGRenderer описания метода пути, чтобы узнать, как создавать свои собственные пути стрелок.

Демонстрация: jsfiddle

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS: 

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.arcArrow = function(x, y, w, h, options) {
  var start = options.start,
    pick = Highcharts.pick,
    defined = Highcharts.defined,
    rx = options.r || w,
    ry = options.r || h || w,
    proximity = 0.001,
    fullCircle =
    Math.abs(options.end - options.start - 2 * Math.PI) <
    proximity,
    end = options.end - proximity,
    innerRadius = options.innerR,
    open = pick(options.open, fullCircle),
    cosStart = Math.cos(start),
    sinStart = Math.sin(start),
    cosEnd = Math.cos(end),
    sinEnd = Math.sin(end),
    // Proximity takes care of rounding errors around PI (#6971)
    longArc = options.end - start - Math.PI < proximity ? 0 : 1,
    arc;

  // Here you can define your arrows path instead of arc
  // Try to add additional code to beggining and end of existing arc

  arc = [
    'M',
    x + rx * cosStart,
    y + ry * sinStart,
    'A', // arcTo
    rx, // x radius
    ry, // y radius
    0, // slanting
    longArc, // long or short arc
    1, // clockwise
    x + rx * cosEnd,
    y + ry * sinEnd
  ];

  if (defined(innerRadius)) {
    arc.push(
      open ? 'M' : 'L',
      x + innerRadius * cosEnd,
      y + innerRadius * sinEnd,
      'A', // arcTo
      innerRadius, // x radius
      innerRadius, // y radius
      0, // slanting
      longArc, // long or short arc
      0, // clockwise
      x + innerRadius * cosStart,
      y + innerRadius * sinStart
    );
  }

  arc.push(open ? '' : 'Z'); // close
  return arc;
};
if (Highcharts.VMLRenderer) {
  Highcharts.VMLRenderer.prototype.symbols.arcArrow = Highcharts.SVGRenderer.prototype.symbols.arcArrow;
}


(function(H) {
  H.SVGRenderer.prototype.arc = function(x, y, r, innerR, start, end) {
    var arc,
      isObject = H.isObject,
      options;

    if (isObject(x)) {
      options = x;
      y = options.y;
      r = options.r;
      innerR = options.innerR;
      start = options.start;
      end = options.end;
      x = options.x;
    } else {
      options = {
        innerR: innerR,
        start: start,
        end: end
      };
    }

    // Arcs are defined as symbols for the ability to set
    // attributes in attr and animate
    arc = this.symbol('arcArrow', x, y, r, r, options);
    arc.r = r; // #959
    return arc;
  }
})(Highcharts);


Highcharts.chart('container', {
  series: [{
    type: 'pie',
    innerSize: '70%',
    data: [
      ['Chrome', 58.9],
      ['Firefox', 13.29],
      ['Internet Explorer', 13],
      ['Edge', 3.78],
      ['Safari', 3.42],
      {
        name: 'Other',
        y: 7.61,
        dataLabels: {
          enabled: false
        }
      }
    ]
  }]
});

Надеюсь, это будет полезно для вас.Если у вас возникнут какие-либо проблемы или мое объяснение слишком сложное, не стесняйтесь спрашивать меня.

...