Kendo图表绑定到JSON

时间:2014-03-17 00:01:08

标签: javascript json kendo-ui kendo-dataviz kendo-chart

给出以下JSON

{
   "ApprovalsSeries":{
      "Items":[
         {
            "Date":"2014-03-01T00:00:00",
            "Value":430
         },
         {
            "Date":"2014-03-02T00:00:00",
            "Value":173
         }
      ],
      "SeriesName":"Place Approvals"
   },
   "RequestsSeries":{
      "Items":[
         {
            "Date":"2014-03-01T00:00:00",
            "Value":143
         },
         {
            "Date":"2014-03-02T00:00:00",
            "Value":19
         }
      ],
      "SeriesName":"Place Requests"
   }
}

我正在尝试使用日期创建一个包含2个系列的简单条形图和一个类别轴。 但是我似乎无法管理它,并且无法在线找到任何绑定到复杂json数据的示例。

1 个答案:

答案 0 :(得分:1)

想象一下,以下是折线图,但概念与条形图相同。

        $("#approvalschart").kendoChart({
            title: {
                text: "Place Requests / Approvals by Date"
            },
            legend: {
                visible: true,
                position: "bottom"
            },
            valueAxis: {
                labels: {
                    format: "N0"
                },
                line: {
                    visible: false
                }
            },
            categoryAxis: {
                labels: {
                    rotation: -90,
                    template: "#= formatApprovalDate(value) #"
                }

            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            },
            seriesDefaults: {
                type: "line",
                style: "smooth"
            },
            series: [
                {
                    field: "Value",
                    categoryField: "Date",
                    name: chartData.SeriesOne.SeriesName,
                    data: chartData.SeriesOne.Items
                },
                {
                    field: "Value",
                    categoryField: "Date",
                    name: chartData.SeriesTwo.SeriesName,
                    data: chartData.SeriesTwo.Items
                }]
        });