Kendo Chart宽度异常及图例点击禁用问题求助

Alright, let's fix your three Kendo Chart problems step by step:

1. Fix Initial Width to Fill Container & Match Legend-Click Behavior #

The issue where the chart doesn't fill its div initially (but does after clicking the legend) happens because Kendo Chart doesn't automatically inherit 100% width by default. To fix this, explicitly set the chartArea.width to "100%" in your configuration. Also, make sure the parent div of #availabilityChart has a defined width (e.g., add CSS like #availabilityChart { width: 100%; } to your stylesheet).

2. Disable Legend Click Functionality #

To prevent clicking the legend from toggling series visibility, add the toggleSeriesVisibility: false property to your legend configuration. This keeps the legend visible but makes it non-interactive.

Modified Full Code #

Here's your updated chart configuration with all fixes applied:

$("#availabilityChart").kendoChart({
    seriesDefaults: { type: "column" },
    legend: {
        position: "bottom",
        toggleSeriesVisibility: false // Disables legend click functionality
    },
    seriesColors: ["#1C64AF"],
    series: [{
        name: availabilityDataSelector,
        data: seriesData,
        field: "metricValue",
        categoryField: "month",
    }],
    chartArea: {
        width: "100%" // Ensures chart fills container width initially
    },
    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 #"
    }
});

Additional Notes #

• Double-check that your parent container for #availabilityChart doesn't have any conflicting padding or margins that might restrict the chart's width.
• If you still see sizing issues after applying the chartArea.width setting, you can trigger a resize manually right after initializing the chart:

  $("#availabilityChart").data("kendoChart").resize();
  

内容的提问来源于stack exchange，提问作者O. Khan