user-interface - Kendo UI 图表 categoryaxis 日期分组按天

Question

我的 json ：

 var stats = [
     { value: 30, date: new Date("2015/04/12"), No: 1 },
     { value: 50, date: new Date("2015/04/12"), No: 2 },
     { value: 45, date: new Date("2015/04/12"), No: 3 },
     { value: 30, date: new Date("2015/04/13"), No: 1 },
     { value: 50, date: new Date("2015/04/13"), No: 2 },
     { value: 45, date: new Date("2015/04/13"), No: 3 },
     { value: 30, date: new Date("2015/04/14"), No: 1 },
     { value: 50, date: new Date("2015/04/14"), No: 2 },
     { value: 45, date: new Date("2015/04/14"), No: 3 }
];

我的代码：

function createChart() {
    $("#chart").kendoChart({
        title: {
            text: "72小时能耗状况图"
        },
        dataSource: {
            data: stats
        },
        seriesColors: ["#3A5FCD"],
        series: [{
            type: "column",
            field: "value",
            categoryField: "date"
        }],
        categoryAxis: {
            baseUnit: "days",
            majorGridLines: {
                visible: false
            }
        },
        valueAxis: {
            line: {
                visible: false
            }
        }
    });
}

我希望每天有三个酒吧，分别为 1、2、3。不同的日子有不同的颜色。

如何修改代码？

你能听懂我说话吗？

Answer 1

在“否”字段上设置分组数据源对象：

var statsDataSource = new kendo.data.DataSource({
    data: stats,
    group: {
        field: "No"
    },
    sort: {
        field: "date",
        dir: "asc"
    },
    schema: {
        model: {
            fields: {
                date: {
                    type: "date"
                }
            }
        }
    }
});

然后在创建图表时使用该数据源：

$("#chart").kendoChart({
    title: { text: "72小时能耗状况图" },
    theme: "Metro",
    dataSource: statsDataSource,                
    series: [{
        type: "column",
        field: "value",
        categoryField: "date",
        name: "#= group.value #"
    }],
    legend: {
        position: "bottom"
    },
    valueAxis: {
        line: {
           visible: false
        }
    },
    categoryAxis: {
      baseUnit: "days",
      majorGridLines: {
          visible: false
      }
    }
});

演示