Ярлыки с надписью Highcharts, выходящие из родителя

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

Here - это то, что я сделал.

$(function() { 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      plotBackgroundColor: null, 
 
      plotBorderWidth: null, 
 
      plotShadow: false, 
 
      type: 'pie', 
 
      margin: [0, 0, 0, 0], 
 
      spacingTop: 0, 
 
      spacingBottom: 0, 
 
      spacingLeft: 0, 
 
      spacingRight: 0 
 
     }, 
 
     title: { 
 
      text: 'Browser market shares January, 2015 to May, 2015' 
 
     }, 
 
     tooltip: { 
 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       allowPointSelect: true, 
 
       cursor: 'pointer', 
 
       dataLabels: { 
 
        enabled: true, 
 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
 
        style: { 
 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: "Brands", 
 
      colorByPoint: true, 
 
      data: [{ 
 
       name: "Microsoft Internet Explorer", 
 
       y: 56.33 
 
      }, { 
 
       name: "Chrome", 
 
       y: 24.03, 
 
       sliced: true, 
 
       selected: true 
 
      }, { 
 
       name: "Firefox", 
 
       y: 10.38 
 
      }, { 
 
       name: "Safari", 
 
       y: 4.77 
 
      }, { 
 
       name: "Opera", 
 
       y: 0.91 
 
      }, { 
 
       name: "Proprietary or Undetectable", 
 
       y: 0.2 
 
      }] 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 350px; margin: 0 auto;border:1px solid #F00;"></div>

источник

2015-09-10 Laxmikant Dange

@ Laxmikant-Данге ли как этот http://jsfiddle.net/Nishith/cnanbsm0/1/ Установить нужную ширину, для вашего случая я установить datalabel-х ширина 60 пикселей.

dataLabels: { 
       style: { 
        width: '60px'//whatever width you want 
       },

источник

2015-09-10 12:30:01

в вашей скрипке dataLabels: { включен: истинный, формата: '{point.name}: {point.percentage: .1f}%', стиля: { цвета: (Highcharts .theme && Highcharts.theme.contrastTextColor) || 'black', width: '60px' } } –

Как использовать динамическую ширину на основе динамических данных. По мере изменения значений иногда может быть записано 1 запись или 10 записей. –

Я воспроизвел этот сценарий, используя 20 элементов вместо 5 (хром, сафари и т. Д.) И заметил, что, когда число категорий увеличивается на высоких диаграммах, несколько ярлыков и других меток показаны на toolTip –

Ярлыки с надписью Highcharts, выходящие из родителя

ответ

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