剑道图表标题/图例溢出隐藏

时间:2018-01-24 11:53:26

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

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

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

我尝试使用此选项。 自动换行:break-word ,但它在画布中呈现。还有其他解决办法吗?

2 个答案:

答案 0 :(得分:0)

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

void a(list1, list2, list3, list4, list5, list6) {
  for (String s1: list1) {
    b(s1, list2, list3, list4, list5, list6)
  }
}

void b(s1, list2, list3, list4, list5, list6) {
  for (String s2: list2) {
    c(s1, s2, list3, list4, list5, list6)
  }
}

void c(s1, s2, list3, list4, list5, list6) {
  for (String s3: list3) {
    d(s1, s2, s3, list4, list5, list6)
  }
}

void d(s1, s2, s3, list4, list5, list6) {
  for (String s4: list4) {
    e(s1, s2, s3, s4, list5, list6)
  }
}

void e(s1, s2, s3, s4, list5, list6) {
  for (String s5: list5) {
    f(s1, s2, s3, s4, s5, list6)
  }
}

void f(s1, s2, s3, s4, s5, list6) {
  for (String s6: list6) {
    methodToRun(s1, s2, s3, s4, s5, s6)
  }
}

答案 1 :(得分:0)

最后,使用这段代码解决了这个问题

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();
}

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

根据决议,标题已在新行中吐出..