javascript - 设置 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、responsive，它们都不起作用。

网上查了一下documentation ，提供了示例，看来这是提供选项的正确方法。然而，显然我做错了什么。

Answer 1

您使用的版本是v2.0。 v2.0 的文档位于 http://nnnick.github.io/Chart.js/docs-v2/

1. 我认为饼图没有刻度，但无论如何您都可以将其设置为折线图的刻度(您可能正在寻找 ticks.fontSize)<

2. 饼图边框颜色需要在options的pie属性上设置

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

   参见https://jsfiddle.net/euq7fvg1/

3. 响应式默认为 true