Настройка Chart.js Варианты диаграммы

Question

У меня возникли трудности с вставкой параметров в отображаемую диаграмму.

Вот код, обратите внимание на значения в разделе «Параметры».

var randomScalingFactor = function() 
{ 
    return Math.round(Math.random() * 100); 
}; 
var randomColorFactor = function() { 
    return Math.round(Math.random() * 255); 
}; 
var randomColor = function(opacity) { 
    return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')'; 
}; 

var config = 
{ 
    type: 'pie', 
    data: 
    { 
     datasets: 
     [ 
      { 
       data: 
       [ 
        <?php 
         foreach($_responseArray as $_key => $_val) 
         { 
          echo("\"".$_val."\","); 
         } 
        ?> 
       ], 

       backgroundColor: 
       [ 
        "#F7464A", 
        "#46BFBD", 
        "#FDB45C", 
        "#949FB1", 
        "#4D5360", 
       ], 
      } 
     ], 
     labels: 
     [ 
      <?php 
       foreach($_responseArray as $_key => $_val) 
       { 
        echo("\"".$_key."\","); 
       } 
      ?> 
     ] 
    }, 
    options: 
    { 
     scaleFontSize: 20, 
     segmentStrokeColor : "#fff", 
     responsive: true 
    }, 

}; 

window.onload = function() 
{ 
    var ctx = document.getElementById("chart-area").getContext("2d"); 
    window.myPie = new Chart(ctx, config); 
}; 

В настоящее время ни один из этих вариантов не применяются scaleFontSize, segmentStrokeColor, отзывчивым, никто из них не работает.

Я просмотрел онлайн documentation, предоставил образцы, и кажется, что это правильный способ предоставить параметры. Однако, очевидно, я делаю что-то неправильно.

Answer 1

Версия, которую вы используете, - v2.0. Документация v2.0 находится в http://nnnick.github.io/Chart.js/docs-v2/

1. Я не думаю, что круговая диаграмма имеет шкалу, но в любом случае вы можете установить его по шкале для скажу, линейный график (вы, вероятно, ищете ticks.fontSize)

2. Pie цвет границы должен быть установлен на pie свойстве options

   ... 
       options: 
       { 
        elements: { 
         arc: { 
          borderColor: 'red' 
         } 
        } 
       } 
   }; 
   

   См https://jsfiddle.net/euq7fvg1/

3. responsive истинно по умолчанию