剑道画布图表标题/图例溢出隐藏答案

【问题标题】：Kendo canvas chart title/legend overflow hidden剑道画布图表标题/图例溢出隐藏
【发布时间】：2018-01-24 11:53:26
【问题描述】：

剑道图表标题/图例截断/溢出隐藏。 图表呈现为画布

根据分辨率，图表标题/图例会重叠/隐藏。我附加了 JsFiddle Demo

我尝试使用此选项。 word-wrap: break-word 但它正在画布中呈现。还有其他解决方案吗？

【问题讨论】：

标签： kendo-ui html5-canvas kendo-asp.net-mvc kendo-chart

【解决方案1】：

您可以对图例应用填充和其他格式来推送它。

 legend: {
     position: "top",
     padding: {
         bottom:30
     }, 
 }

【讨论】：

这行不通博士......你检查过这个 sn-p 演示“dojo.telerik.com/@prasad/iDaMU”..请查看这个......让分享你的 cmets，如何克服这个prb...
从你的问题看来，长系列的标题已经出现在图表上。我建议你给他们更多的成长空间。顺便说一下，你的 sn-p 演示看起来不错，我看不出有什么问题。

【解决方案2】：

用这段代码终于解决了这个问题

function OnChartRender(e) {
    var chart = e.sender;
    var titleText = chart.options.title.text;
    var width = chart._plotArea.categoryAxis.box.width();

    var wordsPerLine = Math.round(width / 100) * 2;
    //var wordsPerLine = Math.round((width / 100) * 1.75);

    var arr = titleText.split(" ");
    var newTitle = "";

    for (var i = 0; i < arr.length; i++) {
        if ((i + 1) % wordsPerLine == 0) {
            newTitle += arr[i].trim() + "\n";
        } else {
            newTitle += arr[i].trim() + " ";
        }
    }
    // console.log("Words : ", wordsPerLine, " Width:", width, (width / 100));
    chart.options.title.text = newTitle;
    chart._events.render = null;
    chart.refresh();
}

在图表呈现期间触发了事件。

根据分辨率，标题已经换行了..

【讨论】：