单击图例时，剑道图表会更改宽度答案

【问题标题】：Kendo chart changes width when legend is clicked on单击图例时，剑道图表会更改宽度
【发布时间】：2018-05-11 22:40:28
【问题描述】：

我有以下剑道定义：

$("#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% 宽度 - 我如何从一开始就拥有它？

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

谢谢。

【问题讨论】：

标签： kendo-ui kendo-chart

【解决方案1】：

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

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

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

DEMO

【讨论】：

谢谢！工作。我也发现了css问题，现在图表是全宽的。