Question

我有一个剑道图表，其中我有jan到jun的数据，其中有多个位置。例如Jan，A，B，Total为location，Feb为A，B，Total。现在我必须显示带有位置栏的图表和总计的折线图。为了显示条形图，我们必须按位置进行分组，因此对于所有位置也会显示该行。你能帮我解决这个问题。我必须绘制没有位置的折线图，它应该像每个月一样。

@(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 #")
                                )
                            )

[{＆＃34; lstTotal＆＃34;：空，＆＃34;位置＆＃34;：＆＃34; Tomball的＆＃34;＆＃34; IronCount＆＃34;：383，＆＃34;月＆＃34;：＆＃34;扬-2015＆＃34;＆＃34;总计＆＃34;：0}，{＆＃34; lstTotal＆＃34;：空，＆＃34;位置＆＃34;：＆＃ 34;平均＆＃34;＆＃34; IronCount＆＃34;：413，＆＃34;月＆＃34;：＆＃34;扬-2015＆＃34;＆＃34;总计＆＃34;：0}， {＆＃34; lstTotal＆＃34;：null，＆＃34; Location＆＃34;：＆＃34; Grand Junction＆＃34;，＆＃34; IronCount＆＃34;：443，＆＃34; Month＆＃34; ：＆＃34;扬-2015＆＃34;＆＃34;总计＆＃34;：0}，{＆＃34; lstTotal＆＃34;：空，＆＃34;位置＆＃34;：＆＃34;总计＆＃34;＆＃34; IronCount＆＃34;：0，＆＃34;月＆＃34;：＆＃34;扬-2015＆＃34;＆＃34;总计＆＃34;：826}，{＆＃ 34; lstTotal＆＃34;：空，＆＃34;位置＆＃34;：＆＃34; Tomball的＆＃34;＆＃34; IronCount＆＃34; 180＆＃34;月＆＃34;：＆＃34 ; FEB-2015＆＃34;＆＃34;总计＆＃34;：0}，{＆＃34; lstTotal＆＃34;：空，＆＃34;位置＆＃34;：＆＃34;平均＆＃34 ;, ＆＃34; IronCount＆＃34;：280，＆＃34;月＆＃34;：＆＃34; FEB-2015＆＃34;＆＃34;总计＆＃34;：0}，{＆＃34; lstTotal＆＃ 34;：null，＆＃34; Location＆＃34;：＆＃34; Grand Junction＆＃34;，＆＃34; IronCount＆＃34;：381，＆＃34; Month＆＃34;：＆＃34; Feb- 2015＆＃34;＆＃34;总计＆＃34;：0}，{＆＃3 4; lstTotal＆＃34;：空，＆＃34;位置＆＃34;：＆＃34;总计＆＃34;＆＃34; IronCount＆＃34;：0，＆＃34;月＆＃34;：＆＃34 ; FEB-2015＆＃34;＆＃34;总计＆＃34; 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

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

Kendo条形图与分组数据，一个列表和基于不同列表的行

1 个答案: