如何在 Kendo 图表中应用平面颜色效果

Question

我在我的项目中使用 Telerik 图表。我可以更改图表的颜色但不能更改样式。我所说的风格是指所有图表（第一张图片）都出现了浮雕效果。我需要应用的是平面颜色（第二张图片）。我如何去除所有 Kendo 图表中图表的渐变效果？

提前致谢。

Answer 1

您必须应用叠加效果。看到这个 Kendo Document

应用none渐变选项，可用渐变选项为：

roundedBevel（这是默认渐变选项）
锐利斜角
none

function createChart() {
    $("#chart").kendoChart({
        title: {
            position: "bottom",
            text: "Share of Internet Population Growth, 2007 - 2012"
        },
        legend: { visible: false },
        chartArea: { background: "" },
        seriesDefaults: {
            labels: {
                visible: true, background: "transparent", template: "#= category #: \n #= value#%"
            }
        },
        series: [{
            type: "pie",
            overlay: { gradient: "none" },
            startAngle: 150,
            data: [{ category: "Asia", value: 53.8, color: "#9de219" },
                { category: "Europe", value: 16.1, color: "#90cc38" },
                { category: "Latin America", value: 11.3, color: "#068c35" },
                { category: "Africa", value: 9.6, color: "#006634" },
                { category: "Middle East", value: 5.2, color: "#004d38" },
                { category: "North America", value: 3.6, color: "#033939" }]
        }],
        tooltip: { visible: true, format: "{0}%" }
    });
}

$(document).ready(createChart);

<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<div id="chart" ></div>

Answer 2

请尝试使用以下代码片段。要去除渐变效果，您必须在图表中设置 'overlay: null'。

<div id="chart"></div>
<script>
    var data = [
       {
           "source": "Hydro",
           "percentage": 22,
           "explode": true
       },
       {
           "source": "Solar",
           "percentage": 2
       },
       {
           "source": "Nuclear",
           "percentage": 49
       },
       {
           "source": "Wind",
           "percentage": 27
       }
    ];

    $(document).ready(function () {
        $("#chart").kendoChart({
            title: {
                text: "Break-up of Spain Electricity Production for 2008"
            },
            legend: {
                position: "bottom"
            },
            dataSource: {
                data: data
            },
            seriesDefaults: {
                overlay: {
                    gradient: null
                }
            },
            series: [{
                type: "pie",
                field: "percentage",
                categoryField: "source",
                explodeField: "explode"
            }],
            seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"],
            tooltip: {
                visible: true,
                template: "${ category } - ${ value }%"
            }
        });
    });

</script>

如有任何疑问，请告诉我。

如何在 Kendo 图表中应用平面颜色效果

How to apply flat colors effect in Kendo charts

charts

telerik

kendo-ui

kendo-chart