以编程方式添加plotbands kendo图表

Question

剑道版2015.1.429

我无法弄清楚为什么这不起作用。我一直在与它斗争几个小时无济于事。我已经尝试过各种轴名称的变化等。

有任何想法吗？

@(Html.Kendo().Chart<OTIS.AppServ.Reporting.ViewModels.ItemDailyForecast>()
    .Name("chart_ItemForecastByDay")
    .Theme("Silver")
    .HtmlAttributes(new { @class = "widgetFullWidth" })
    .Title("Item Daily Forecast")
    .Legend(legend => legend
    .Position(ChartLegendPosition.Bottom)
    .Visible(true)
    )
    .Events(events => events
        .Render("hideChartLoadingImage")
    )
    .AutoBind(true)
    .DataSource(ds => ds
    .Read(read => read.Action("GetItemForecastByDay", "InventoryReports", new { area = "Reporting", intItemId = Model, intDaysOut = 90}))
    .Sort(sort =>
    {
        sort.Add(model => model.Date).Ascending();
    })
    )
    .Series(series =>
    {
        series
        .Line(model => model.DailyUnitBalanceQty)
        //.Column(model => model.DailyUnitBalanceQty)
        .Name("Units Avail")
        //.Color("#5cbe2d")
        .Aggregate(ChartSeriesAggregate.Sum)
        .Axis("Axis1")
        .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name # (#= kendo.toString(category, 'd') #, #= kendo.format('{0:n0}', value) #)")
        )
        ;
    })
    .Series(series =>
    {
        series
        .Line(model => model.DailyDaysOnHandQty)
        //.Column(model => model.DailyDaysOnHandQty)
        .Name("Days On Hand")
        //.Color("#5cbe2d")
        .Aggregate(ChartSeriesAggregate.Sum)
        .Axis("Axis1")
        .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name # (#= kendo.toString(category, 'd') #, #= kendo.format('{0:n0}', value) #)")
        )
        ;
    })
    .Series(series =>
    {
        series
        .Column(model => model.DailyReceiptQty)
        .Name("Receipt Qty")
        //.Color("#5cbe2d")
        .Aggregate(ChartSeriesAggregate.Sum)
        .Axis("Axis1")
        .Spacing(0.0)
        .Gap(0.0)
        .Tooltip(tooltip => tooltip
        .Visible(true)
        .Template("#= series.name # (#= kendo.toString(category, 'd') #, #= kendo.format('{0:n0}', value) #)")
        )
        ;
    })
    .CategoryAxis(axis => axis
    .Date()
    .BaseUnit(ChartAxisBaseUnit.Days)
    .Categories(model => model.Date)
    .Labels(labels => {
        labels.Rotation(90);
    }
    )
    .AxisCrossingValue(0, 1000)
    )
    .ValueAxis(axis => axis
    .Numeric("Axis1")
    .Labels(labels => labels.Format("{0:n0}"))
    .PlotBands(bands =>
    {
        //bands.Add().From(-10).To(50).Color("#c00").Opacity(0.3);
        bands.Add().From(49).To(50).Color("#c00").Opacity(0.8);
    })
    )
    .ChartArea(chartArea => chartArea
    .Background("transparent")
    .Height(300)
    )
    .PlotArea(plotArea => plotArea
    .Background("transparent")
    //.Margin(40)
    )
)

<script>
$(function(){
   var chart = $("#chart_ItemForecastByDay").data("kendoChart");
   options["categoryAxis"] = { plotBands: [{ from: "3/17/2019", to: "3/20/2019", color: "green", opacity: 0.3 }] };
   options["yAxis"] = { plotBands: [{ from: 20, to: 30, color: "blue", opacity: 0.3 }] };
   options["valueAxis"] = { plotBands: [{ from: 10, to: 20, color: "yellow", opacity: 0.3 }] };
   options["Axis1"] = { plotBands: [{ from: 10, to: 20, color: "yellow", opacity: 0.3 }] };
   chart.setOptions(options);
}
</script>

Answer 1

对于分类图表类型，我们应该使用categoryAxis和valueAxis plotBands。

<script>
      var stats = [
                    { value: 48, date: new Date("2014/01/01") },
                    { value: 50, date: new Date("2014/01/02") },
                    { value: 55, date: new Date("2014/01/03") },
                    { value: 35, date: new Date("2014/01/04") },
                    { value: 30, date: new Date("2014/01/05") },
                    { value: 30, date: new Date("2014/01/20") },
                    { value: 50, date: new Date("2014/01/21") },
                    { value: 45, date: new Date("2014/01/22") },
                    { value: 40, date: new Date("2014/01/23") },
                    { value: 35, date: new Date("2014/01/24") },
                    { value: 40, date: new Date("2014/01/25") },
                    { value: 42, date: new Date("2014/01/26") },
                    { value: 40, date: new Date("2014/01/27") },
                    { value: 35, date: new Date("2014/01/28") },
                    { value: 43, date: new Date("2014/01/29") },
                    { value: 38, date: new Date("2014/01/30") },
                    { value: 30, date: new Date("2014/01/31") }                    
                ];


      $("#chart").kendoChart({
        dataSource: {
            data: stats
        },
        series: [{
            type: "column",
            aggregate: "avg",
            field: "value",
            categoryField: "date"
        }],
        categoryAxis: {
            type: "date",
            majorGridLines: {
                visible: false
            }
        },
        valueAxis: {
            line: {
                visible: false
            }
        } 
      });

      $(function(){
        var chart = $("#chart").data("kendoChart");
        var options = {};         
        var fromDate = new Date("2014/01/15");
        var toDate = new Date("2014/01/20");;        
        options["categoryAxis"] = { plotBands: [{ from: fromDate, to: toDate, color: "green", opacity: 0.3 }] };  
        options["valueAxis"] = { plotBands: [{ from: 10, to: 20, color: "yellow", opacity: 0.3 }] };
        chart.setOptions(options);        
    });
</script>

而对于Scatter Chart类型，我们应该使用xAxis和yAxis plotBands

<script>
    function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Rainfall - Wind Speed"
                },
                legend: {
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "scatter"
                },
                series: [{
                    name: "January 2008",
                    data: [
                    [16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1], [13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0], [16.4, 1.8], [13.6, 0.3], [13.6, 0], [29.9, 0], [27.1, 2.3], [16.4, 0], [13.6, 3.7], [10.9, 5.2], [16.4, 6.5], [10.9, 0], [24.5, 7.1], [10.9, 0], [8.1, 4.7], [19, 0], [21.7, 1.8], [27.1, 0], [24.5, 0], [27.1, 0], [29.9, 1.5], [27.1, 0.8], [22.1, 2]]
                },{
                    name: "January 2009",
                    data: [
                    [6.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2], [1.4, 7], [6.4, 8.8], [3.6, 4.3], [1.6, 10], [9.9, 2], [7.1, 15], [1.4, 0], [3.6, 13.7], [1.9, 15.2], [6.4, 16.5], [0.9, 10], [4.5, 17.1], [10.9, 10], [0.1, 14.7], [9, 10], [2.7, 11.8], [2.1, 10], [2.5, 10], [27.1, 10], [2.9, 11.5], [7.1, 10.8], [2.1, 12]]
                },{
                    name: "January 2010",
                    data: [
                    [21.7, 3], [13.6, 3.5], [13.6, 3], [29.9, 3], [21.7, 20], [19, 2], [10.9, 3], [28, 4], [27.1, 0.3], [16.4, 4], [13.6, 0], [19, 5], [16.4, 3], [24.5, 3], [32.6, 3], [27.1, 4], [13.6, 6], [13.6, 8], [13.6, 5], [10.9, 4], [16.4, 0], [32.6, 10.3], [21.7, 20.8], [24.5, 0.8], [16.4, 0], [21.7, 6.9], [13.6, 7.7], [16.4, 0], [8.1, 0], [16.4, 0], [16.4, 0]]
                }],
                xAxis: {
                    max: 35,
                    title: {
                        text: "Wind Speed [km/h]"
                    },
                    crosshair: {
                        visible: true,
                        tooltip: {
                            visible: true,
                            format: "n1"
                        }
                    }
                },
                yAxis: {
                    min: -5,
                    max: 25,
                    title: {
                        text: "Rainfall [mm]"
                    },
                    axisCrossingValue: -5,
                    crosshair: {
                        visible: true,
                        tooltip: {
                            visible: true,
                            format: "n1"
                        }
                    }
                }
            });

        var chart = $("#chart").data("kendoChart");
        var options = {}; 

        var fromDate = new Date("2014/01/15");
        var toDate = new Date("2014/01/20");;
        options["xAxis"] = { plotBands: [{ from: 10, to: 20, color: "yellow", opacity: 0.3 }] };
        options["yAxis"] = { plotBands:  [{ from: -5, to: 0, color: "red", opacity: 0.3 }] };
        chart.setOptions(options);
    }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
</script>