4

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」を青にしようとしていますが、チャートは次のスクリーンショットのようにレンダリングされます。

ここに画像の説明を入力

正しい方向への指針をいただければ幸いです。

4

2 に答える 2