剑道 UI 图表颜色答案

【问题标题】：Kendo UI Chart Colors剑道 UI 图表颜色
【发布时间】：2013-08-29 16:50:57
【问题描述】：

我在为 Kendo UI 柱形图配置条形颜色时遇到问题。代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="chart"></div>
    <script src="js/thirdParty/jquery.js"></script>
    <script src="js/thirdParty/kendo.all.min.js"></script>
    <script>
        $(function () {
            var data,
                dataSource;
            data = [{
                type: "C1",
                amount: 100,
                year: 2008,
                color: "red"
            }, {
                type: "C2",
                amount: 120,
                year: 2008,
                color: "blue"
            }, {
                type: "C2",
                amount: 50,
                year: 2009,
                color: "blue"
            }, {
                type: "C1",
                amount: 10,
                year: 2010,
                color: "red"
            }, {
                type: "C1",
                amount: 120,
                year: 2011,
                color: "red"
            }, {
                type: "C2",
                amount: 50,
                year: 2011,
                color: "blue"
            }];
            dataSource = new kendo.data.DataSource({
                data: data,
                group: {
                    field: "type"
                },
                sort: { field: "year" }
            });
            $("#chart").kendoChart({
                dataSource: dataSource,
                series: [{
                    type: "column",
                    field: "amount",
                    categoryField: "year",
                    name: "#= group.value #",
                    colorField: "color"
                }],
            })
        });
    </script>
</body>
</html>

我试图将“C1”设为红色，将“C2”设为蓝色，但图表呈现如下屏幕截图：

任何正确方向的指针将不胜感激。

【问题讨论】：

标签： javascript jquery telerik kendo-ui

【解决方案1】：

进一步研究后，我发现 colorField 用于将颜色设置为系列中的单个点（而不是整个系列）。我发现 seriesColors 正是我想要的：

http://docs.kendoui.com/api/dataviz/chart#configuration-seriesColors

这是我重构的示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="chart"></div>
    <script src="js/thirdParty/jquery.js"></script>
    <script src="js/thirdParty/kendo.all.min.js"></script>
    <script>
        $(function () {
            var data,
                dataSource;
            data = [{
                type: "C1",
                amount: 100,
                year: 2008
            }, {
                type: "C2",
                amount: 120,
                year: 2008
            }, {
                type: "C2",
                amount: 50,
                year: 2009
            }, {
                type: "C1",
                amount: 10,
                year: 2010
            }, {
                type: "C1",
                amount: 120,
                year: 2011
            }, {
                type: "C2",
                amount: 50,
                year: 2011
            }];
            dataSource = new kendo.data.DataSource({
                data: data,
                group: {
                    field: "type"
                },
                sort: { field: "year" }
            });
            $("#chart").kendoChart({
                dataSource: dataSource,
                seriesColors: ["red", "blue"],
                series: [{
                    type: "column",
                    field: "amount",
                    categoryField: "year",
                    name: "#= group.value #"
                }],
            })
        });
    </script>
</body>
</html>

【讨论】：

【解决方案2】：

检查 JS Fiddle

http://jsfiddle.net/9VZdS/45/

$(function() {
    var dataset = new Array(1,2,3,null,5,6);
    var highlighted = new Array(null,null,null,4,null,null);

    $('#chart').kendoChart({
        theme: 'metro',
        seriesDefaults: {
            type: 'column',
            stack: true
        },
        series: [
            {
                name: 'Not Highlighted',
                data: dataset,
                color: 'red'
            },
            {
                name: 'Highlighted',
                data: highlighted,
                color: 'blue'
            }
        ]
    })
});

【讨论】：

你好阿伦，你对以下问题有什么想法stackoverflow.com/questions/30176594/multi-color-line