Kendo 带分组数据的条形图，一个列表和基于不同列表的折线

Question

我有一个 kendo 图表，其中我有从一月到六月的数据，其中有多个位置。例如，Jan 将 A、B、Total 作为位置，Feb 将 A、B、Total 作为位置。现在我必须显示带有位置的条形图和总计的折线图。为了显示条形图，我们必须按位置分组，因此对于线也显示所有位置。你能帮我解决一下吗this.I 必须绘制没有位置的折线图它应该是每个月总共一个。

@(Html.Kendo().Chart(Model.CertifiedIronProductionReports)
 @(Html.Kendo().Chart(Model.CertifiedIronProductionReports)
                                .Name("CertifiedIronProduced")
                                .Legend(legend => legend
                                .Visible(true)
                                .Position(ChartLegendPosition.Top)
                                )
                                .ChartArea(chartArea => chartArea
                                .Background("transparent")
                                )
            .DataSource(datasource => datasource
                .Group(group => group.Add(model => model.Location))
                .Sort(sort => sort.Add(model => model.Month))
            )
                                .Series(series =>
                                {
                                    series.Column(Model.CertifiedIronProductionReports).CategoryField("Month").Field("IronCount");
                                })
                                .Series(series =>
                                {
                                    series.Line(Model.CertifiedIronProductionReports).CategoryField("Month").Field("Total").Axis("TotalAxis");
                                })
                                .CategoryAxis(axis => axis
                                    .Categories(categories => categories.Month)
                                    .AxisCrossingValue(0, 20)
                                )
                                .ValueAxis(axis => axis
                                .Numeric()
                                .Line(line => line.Visible(false))
                                .MajorGridLines(lines => lines.Visible(true))
                                )
            .ValueAxis(axis => axis
            .Numeric("TotalAxis")
            .Line(line => line.Visible(false))
            .MajorGridLines(lines => lines.Visible(true))
            )
                                .Tooltip(tooltip => tooltip
                                .Visible(true)
                                .Template("#= series.name #: #= value #")
                                )
                            )

[{"lstTotal":null,"Location":"Tomball","IronCount":383,"Month":"Jan-2015","Total":0},{"lstTotal":null,"Location":"Average","IronCount":413,"Month":"Jan-2015","Total":0},{"lstTotal":null,"Location":"Grand Junction","IronCount":443,"Month":"Jan-2015","Total":0},{"lstTotal":null,"Location":"Total","IronCount":0,"Month":"Jan-2015","Total":826},{"lstTotal":null,"Location":"Tomball","IronCount":180,"Month":"Feb-2015","Total":0},{"lstTotal":null,"Location":"Average","IronCount":280,"Month":"Feb-2015","Total":0},{"lstTotal":null,"Location":"Grand Junction","IronCount":381,"Month":"Feb-2015","Total":0},{"lstTotal":null,"Location":"Total","IronCount":0,"Month":"Feb-2015","Total":561}]

Answer 1

如果您将每个月除了一个条目之外的所有条目的总数更改为 null，则不会显示额外的行：

[
 {"lstTotal":null,"Location":"Tomball","IronCount":383,"Month":"Jan-2015","Total":null},
 {"lstTotal":null,"Location":"Average","IronCount":413,"Month":"Jan-2015","Total":null},
 {"lstTotal":null,"Location":"Grand Junction","IronCount":443,"Month":"Jan-2015","Total":null},
 {"lstTotal":null,"Location":"Total","IronCount":0,"Month":"Jan-2015","Total":826},
 {"lstTotal":null,"Location":"Tomball","IronCount":180,"Month":"Feb-2015","Total":null},
 {"lstTotal":null,"Location":"Average","IronCount":280,"Month":"Feb-2015","Total":null},{"lstTotal":null,"Location":"Grand Junction","IronCount":381,"Month":"Feb-2015","Total":null},
 {"lstTotal":null,"Location":"Total","IronCount":0,"Month":"Feb-2015","Total":561}
]

var dsCertpData = new kendo.data.DataSource({
    data: certData,
    group: {
        field: "Location",
    },
    sort:{       
        field :"Month",
        dir:"asc"
    }
});  

$("#chart1").kendoChart({
        dataSource: dsCertpData,
        legend: {
          position: "top",
          visible: true,
        },
        seriesColors: ["#00B0F0", "#E29B2C","#A05FCF","#3F890D"],
        series: [
          {
            type: "column",
            categoryField: "Month",
            field:"IronCount",
            stack: true
          },
          {
            type: "line",
            categoryField: "Month",
            field:"Total",
            visibleInLegend: false,
          }        
        ],
        tooltip: {
            visible: true,
            template: "${series.name} : ${value}"
        }
    });

DEMO

注意：您当前将月份作为字符串进行排序，因此 Feb 按字母顺序排在 Jan 之前。您需要将架构设置为使用实际日期字段才能正确排序。

Kendo 带分组数据的条形图，一个列表和基于不同列表的折线

Kendo Bar chart with grouped data with one list and line based on different list

kendo-ui

kendo-chart