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，则会得到一个饼图。

代码：

var data = [{
            value: 45,
            color:"#17CB8A",
            highlight: "#17CB8C",
            label: "Strating"                
        }

]

var options = {
    animation: false,
    percentageInnerCutout : 80
};

查看此JSFIDDLE

编辑完整代码：

HTML CODE：

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

JS CODE：

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);

我想要一个薄边框甜甜圈图表

1 个答案: