jQuery甜甜圈图定制答案

【问题标题】：Jquery donut chart customisationjQuery甜甜圈图定制
【发布时间】：2013-05-27 07:59:02
【问题描述】：

您好，我正在尝试复制下图：

我找到了一个几乎可以复制的插件，我尝试自定义它以设置样式并添加内部文本。我似乎无法将其样式如下。我试图将颜色属性应用于系列，但这不起作用。我不确定 colorScheme 属性是否被覆盖，但我现在卡住了。

这是我尝试过的：jsFiddle

代码如下：

var data = [
    {Responses: "Accepted", Share: 33.3},
    {Responses: "Unresponded", Share: 26.5},
    {Responses: "Rejected", Share: 25.4}
]

// prepare chart data as an array
var source =
{
    datatype: "array",
    datafields: [
        { name: 'Responses' },
        { name: 'Share' }
    ],
    localdata: data
};

var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

// prepare jqxChart settings
var settings = {
    title: "Geoff's Birthday Party",
    description: "",
    enableAnimations: true,
    showLegend: false,
    legendPosition: { left: 520, top: 140, width: 100, height: 100 },
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: dataAdapter,
    colorScheme: 'scheme13',
    seriesGroups:
        [
            {
                type: 'donut',
                showLabels: false,
                series:
                    [
                        {
                            dataField: 'Share',
                            displayText: 'Responses',
                            labelRadius: 100,
                            initialAngle: 15,
                            radius: 130,
                            innerRadius: 90,
                            centerOffset: 0,
                            formatSettings: {decimalPlaces:1 },
                            color:'#00000'
                        }
                    ]
            }
        ]
};

// setup the chart
$('#jqxChart').jqxChart(settings);

提前致谢

【问题讨论】：

你是如何将你选择的文本放入 de pie 的？

标签： jquery html css jquery-widgets

【解决方案1】：

您需要创建自己的配色方案：

$.jqx._jqxChart.prototype.colorSchemes.push({ name: 'myScheme', colors: ['#006688', '#bbbbbb', '#7777777'] });

然后在设置对象而不是'scheme13'中引用它：

colorScheme: 'myScheme',

http://jsfiddle.net/aPK98/3/

不幸的是，它们不支持每个值的标注/引线或在中间显示总数。如果需要，您需要使用 SVG 手动绘制它们。

【讨论】：

非常感谢！不知道配色方案