Настройка ярлыков полярных зон Highcharts

Я создаю диаграмму полярных областей в Highcharts. У меня возникают проблемы с размещением меток внутри диаграммы. Смотрите пример здесь:Настройка ярлыков полярных зон Highcharts

$('#container').highcharts({ 

     chart: { 
      polar: true, 
      backgroundColor: 'transparent', 
      plotBorderWidth: null, 
      margin: [0, 0, 0, 0], 
      spacingTop: 0, 
      spacingBottom: 0, 
      spacingLeft: 0, 
      spacingRight: 0 
     }, 

     title:{ 
      text:'' 
     }, 

     subTitle:{ 
      text:'' 
     }, 

     pane: { 
      startAngle: 0, 
      endAngle: 360 
     }, 

     legend: { 
      enabled: false 
     }, 

     xAxis: { 
      tickInterval: 45, 
      min: 0, 
      max: 360, 
      lineWidth: 0, 
      minorGridLineWidth: 0, 
      gridLineColor: 'transparent', 
      labels: { 
       enabled: false 
      }, 
     }, 

     yAxis: { 
      min: 0, 
      lineWidth: 0, 
      minorGridLineWidth: 0, 
      gridLineColor: 'transparent', 
      labels: { 
       enabled: false 
      }, 
     }, 

     plotOptions: { 
      series: { 
       pointStart: 0, 
       pointInterval: 45, 
       pointPlacement: 'between', 
       states: { 
        hover: { 
         enabled: true 
        } 
       }, 
       dataLabels: { 
        enabled: true, 
        format: '<span class="wheel-label" style="color: {point.color}">{point.name}</span>', 
        style: { 
         textShadow: false, 
         width: 150, 
         fontSize: "16px" 
        }, 
       } 
      }, 
      column: { 
       pointPadding: 0, 
       groupPadding: 0, 
       borderWidth: borderWidth 
      }, 
     }, 

     series: [{ 
      showInLegend: false, 
      type: 'column', 
      name: 'Column', 
      data: data 
     }], 

     credits: { 
      enabled: false 
     } 
    });

http://jsfiddle.net/c904atb3/

Я замечаю с круговыми диаграммами есть варианты для «расстояний», но нет такой опции не существует для полярной диаграммы. Я также хотел бы иметь возможность использовать «разъемы», если это возможно, но я не вижу, чтобы это было доступно для полярных. Как я могу получить больше контроля над этими ярлыками?

источник

2015-06-01 Jack Arturo

Круговая диаграмма имеет определенные параметры. Ваша полярная диаграмма похожа на круговую диаграмму, поэтому, возможно, используйте круговую диаграмму с параметрами, которые вы хотите использовать? [Здесь] (http://api.highcharts.com/highcharts#plotOptions.column.dataLabels) вы можете найти список всех опций для dataLabels для типа столбцов. Полезными являются 'x' /' y'/'align' /' verticalAlign' и т. Д. –

Я сделал JSFiddle со всеми столбцами до значения 10, но в производстве некоторые столбцы будут короче других, поэтому пирог не будет работать , –

У меня были аналогичные проблемы с тем, чтобы метки были «вытолкнуты» из границ полярной/паукской диаграммы. То, как я решил это, - использовать полосы заговора, чтобы поместить кольцо вокруг внешнего края.

Мой тест можно найти здесь: http://jsfiddle.net/brightmatrix/j3v0zstk/

В этом случае, я добавил следующую строку в ваш YAxis:

plotBands: [ { from: 8, to: 15, color: '#FFFFFF', zIndex: 5 } ]

Значения I используются только для иллюстрации. Если вы хотите, чтобы цветные клинья в вашей диаграмме действительно погасли до 10, определите максимальное значение для вашего yAxis и включите полосы сюжета, которые будут проходить мимо краев диаграммы.

Значение zIndex, равное «5», гарантирует, что полосы сюжета будут сидеть поверх клипов диаграммы, чтобы дать желаемый эффект.

Надеюсь, это полезно!

источник

2016-01-20 12:54:37

Это замечательно. Я уже закрылся с этим клиентом, но похоже, что вы нашли лучшее решение. Я уверен, что другие гуглеры найдут это полезным! –

Вы можете задать координаты лейбла, как это:

var data = [{ 
      name: "Label 1", 
      dataLabels: { 
        x:100, 
        y:100 
      }, 
      y: 10, 
      color: "#9fe642" 
     },

http://jsfiddle.net/c904atb3/1/

источник

2015-06-01 16:50:39 yuk

Это работает, спасибо. Но есть ли способ сделать это динамически? Может быть, проверить позицию и настроить ее, если она находится в определенном значении? –

мне удалось это исправить, позволяя лейблам выходить за пределы контейнера, то установка контейнера для переполнения: видимый. Не идеальный, но он работает.

dataLabels: { 
    enabled: true, 
    crop: false, 
    overflow: 'none', 
    padding: 50, 
    useHTML: true, 
    verticalAlign: 'middle', 
    format: '<div class="wheel-label" style="color: {point.color}">{point.name}</div>', 
    style: { 
     textShadow: false, 
     width: 250, 
     fontSize: '22px' 
    }, 
}

http://jsfiddle.net/c904atb3/2/

В моем производстве код я добавил класс CSS для каждой метки на основе имени, так что я могу настроить позиционирование в CSS.

источник

2015-06-02 15:09:37

Настройка ярлыков полярных зон Highcharts

ответ

Смежные вопросы