Kendo UI диаграмма категорияоси даты группа по дням

мой 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. и разные дни имеют разный цвет.

Как я могу изменить код?

Вы меня понимаете?


user-interface charts kendo-ui kendo-chart
person yinjiale    schedule 15.04.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Настройте объект dataSource с группировкой по полю «Нет»:

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
      }
    }
});

ДЕМО

person ezanker    schedule 16.06.2015