在ChartJs图表中调整半径大小

时间:2015-05-20 10:01:08

标签: javascript jquery html5 canvas

enter image description here

I.m使用ChartJs作为“甜甜圈图”。默认半径远大于我的预期。有没有办法调整半径宽度。?

documentatin部分没有提供任何信息。

  $( document ).ready(function() {
    var ctx = document.getElementById("chart-area").getContext("2d");

    new Chart(ctx).Doughnut(doughnutData, {responsive : true});
  });

1 个答案:

答案 0 :(得分:0)

在原型初始化之后扩展圆环图以设置outerRadius(可能使用您传入的选项)

    public static bool IsOnTheAir(string id)
    {
        string url = "http://api.themoviedb.org/3/tv/on_the_air";

        int pages = 1;

        WebClient webClient = new WebClient();
        Stream stream = webClient.OpenRead(url);

        // first page
        using (StreamReader reader = new StreamReader(stream))
        {
            JObject jObject = JObject.Parse(reader.ReadLine());

            pages = int.Parse(jObject["total_pages"].ToString());

            foreach (var show in jObject["results"])
            {
                if (show["id"].ToString() == id) { return true; }
            }
        }

        // subsequent pages
        if (pages > 1)
        {
            for (int i = 2; i <= pages; i++)
            {
                url = "http://api.themoviedb.org/3/tv/on_the_air" + "&page=" + i.ToString();

                stream = webClient.OpenRead(url);
                using (StreamReader reader = new StreamReader(stream))
                {
                    JObject jObject = JObject.Parse(reader.ReadLine());

                    foreach (var show in jObject["results"])
                    {
                        if (show["id"].ToString() == id) { return true; }
                    }
                }
            }
        }

        return false;
    }
}

然后使用扩展图表类型

Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    initialize: function(data){
        Chart.types.Doughnut.prototype.initialize.apply(this, arguments);
        this.outerRadius *= this.options.radiusPercentage;
    }
});