Kendo 单击图例时图表会更改宽度

Question

我有以下 kendo 定义：

$("#availabilityChart").kendoChart({
                seriesDefaults: {
                    type: "column"
                },
                legend: {
                    position: "bottom",
                },
                seriesColors: ["#1C64AF"],
                series: [{
                    name: availabilityDataSelector,
                    data: seriesData,
                    field: "metricValue",
                    categoryField: "month",
                }],
                categoryAxis: [{
                    type: "date",
                    baseUnit: "months",
                    labels: {
                        dateFormats: {
                            days: "MMM"
                        }
                    }
                }],
                valueAxis: [{
                    labels: {
                        format: "{0}%"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                }],
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });

首先，图表不是包含 div 的全宽 - 这是我想要的。

其次，当我点击图例中的一个项目（我只有一个）时，图表会调整大小并变为 100% 宽度 - 我如何从一开始就拥有这个？

最后，我想禁止点击图例。我只是想让它显示但删除了点击项目的能力。

谢谢。

Answer 1

要防止图例点击行为，请使用 legendItemClick 事件：

legendItemClick : function ( e ){
    e.preventDefault();
},

除非您有一些 CSS 覆盖宽度，图表应该自动填充容器宽度。

DEMO