如何在剑道图表中应用纯色效果

Posted 2023-05-07

【中文标题】如何在剑道图表中应用纯色效果

【英文标题】：How to apply flat colors effect in Kendo charts

【发布时间】：2016-06-14 20:03:44

【问题描述】：

我在我的项目中使用 Telerik 图表。我可以更改图表的颜色，但不能更改样式。我所说的风格是 - 在所有图表上出现浮雕效果（第一张图片）。我需要应用的是纯色（第二张图片）。如何消除所有剑道图表中图表的渐变效果？

提前致谢。

【参考方案1】：

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

应用 none 渐变选项，可用的渐变选项有：

roundedBevel（这是默认渐变选项） 锐角 无

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>

【参考方案2】：

请尝试使用以下代码 sn-p。要消除渐变效果，您必须在图表中设置“叠加：空”。

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

如果有任何问题，请告诉我。