我想要一张薄边框的甜甜圈图

Question

我想要一个细边框的图表。

<canvas id="chart-area" width="200" height="200" style="width:150px !important; height:150px !important;"/></canvas>

脚本在这里:

<script src="[http://www.chartjs.org/assets/Chart.min.js][1]"></script>
<script>
    var doughnutData = [
            {
                value: 45,
                color:"#17CB8A",
                highlight: "#17CB8C",
                label: "Strating",
            },
        ];
        window.onload = function(){
            var ctx = document.getElementById("chart-area").getContext("2d");
            window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
</script>

我想要一个非常细的边框

Answer 1

我认为你必须设置这个属性:percentageInnerCutout : 80

如果我没理解错的话，你可以用这个属性设置绿色边框的大小。例如，如果您可以将值从80更改为0，您将得到一个piechart。

代码:

var data = [{
            value: 45,
            color:"#17CB8A",
            highlight: "#17CB8C",
            label: "Strating"                
        }
]
var options = {
    animation: false,
    percentageInnerCutout : 80
};

查看这个JSFIDDLE

---

编辑完整代码:

HTML代码:

<canvas id="myChart" width="200" height="200" style="width:150px !important; height:150px !important;"></canvas>

JS代码:

var data = [{
            value: 45,
            color:"#17CB8A",
            highlight: "#17CB8C",
            label: "Strating"                
        }
]
var options = {
    animation: false,
    percentageInnerCutout : 80
};
//Get the context of the canvas element we want to select
var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d");
/*************************************************************************/
myNewChart = new Chart(ct).Doughnut(data, options);