Flot Круговая диаграмма не будет отображаться при использовании небольших значений.

Question

Я новичок, когда дело доходит до графика флота, и у меня проблема с моей круговой диаграммой.

Когда я пытаюсь установить очень маленькое значение внутри набора данных Flot (см. Ниже), он сделает ошибку: «Не удалось нарисовать пирог с надписями, содержащимися внутри холста».

var pie_dataset = [ 
     { label:"Company1", data:1000.00, color: randomColor() }, 
     { label:"Company2", data:10000.00, color: randomColor() }, 
     ]; 

    var options = { 
     series: { 
      pie: { 
       show: true, 
       label: { 
        show: true, 
        radius: 180, 
        formatter: function (label, series) { 
         return '<div style="border:1px solid grey;font-size:8pt;text-align:center;padding:5px;color:white;">' + 
         label + ' : ' + 
         Math.round(series.percent) + 
         '%</div>'; 
        }, 
        background: { 
         opacity: 0.8, 
         color: '#000' 
        } 
       } 
      } 
     }, 
     legend: { 
      show: false 
     }, 
     grid: { 
      hoverable: true 
     } 
    }; 

Но когда я изменяю значение «Compay2» = 1500.00, тогда он отлично работает.

Есть ли у диаграммы флота такие ограничения?

Answer 1

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

Я создал рабочий пример для вашего кода here, который включает в себя 3 разных способа решения проблемы.

Решение # 1

HTML:

<div id="placeholder1" style="width:600px; height:380px;"></div> 

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

Решение # 2

HTML:

<div id="container" style="width:800px; height:400px;"> 
    <div id="placeholder2" style="width:600px; height:100%;"></div> 
</div> 

Для второй круговой диаграммы, изменение в том, контейнер, заполнитель для диаграммы. Контейнер имеет определенную ширину и высоту, а затем местозаполнитель использует процент от высоты контейнера.

Решение # 3

HTML:

<div id="placeholder3" style="width:600px; height:300px;"></div> 

JS:

options.series.pie.label.radius= 140; 

Для третьей диаграмме пирога, изменение в имеет меньший радиус, чтобы уместить его в меньший заполнитель.