基础图切片颜色对系列值?

时间:2014-01-31 16:06:51

标签: css chart.js

现在我正在使用自定义调色板在饼图中显示警告级别计数。然而,偶尔会出现意外严重的警报,这会弄乱颜色。我想设置一些CSS类,如warningPie,criticalPie或minorPie,分别为橙色,红色和黄色。然后,我想使用系列标签文本来应用该类。

我在dxchart文档中没有看到任何可以实现此功能的内容。 anyoe有什么想法吗?

如果有人好奇,这是我的完整图表代码。

dxPieChart: {
    dataSource: fieldValueCount(['severity']),
    palette: ['#CC3300', '#FF9900', '#FFFF00',  '#33CC33', '#0066FF'],
    animation: true,
    legend: {
        backgroundColor: '#FCFCFC',
        border: {
                color: 'black',
                width: .5,
                visible: true,
                cornerRadius: 10
        },
        visible: false
    },
    series: [{
        type: 'doughnut',
        argumentField: 'severity',
        valueField: 'count',
        label: {
            visible: false,
            font: {
                size: 12,
                color: 'black'
            },
            radialOffset: -15,
            backgroundColor: 'rgba(0,0,0,0)',
            connector: {
                visible: false,
                width: 0.5
            },
            position: 'inside',
            customizeText: function(arg) {
                globalTest = arg;
                return arg.value + ' (' + arg.percentText + ')';
            }
        },
        border: {
            color: 'black',
            width: .5,
            visible: true
        },
        hoverStyle: {
            border: {
                color: 'black',
                width: .5,
                visible: true
            }
        }
    }],
    tooltip: {
        enabled: true,
        color: 'cornflowerblue',
        font: {
            size: 14
        },
        customizeText: function(arg) {
            globalTest = arg;
            var content = arg.argumentText + '<br>' +  arg.value + ' (' + Math.round(arg.percent * 100) + '%)';
            return content
        }
    },
        title: {
            text: ' ',
            font: { size: 14 },
            horizontalAlignment: 'center'
        }
}

1 个答案:

答案 0 :(得分:1)

您可以在饼图中使用customizePointcustomizeLabel选项。