Javascript 如何正确呈现剑道图自定义标签
我需要自定义剑道折线图的标签(比如泡泡语)。 我构建了一个模板(就像在这个剑道测试中:。我从剑道论坛线程中的管理解决方案中获取了这个演示),它在第一次加载页面时可以工作,但在某些情况下剑道UI不会呈现标签。 这两种情况下会出现问题:Javascript 如何正确呈现剑道图自定义标签,javascript,kendo-ui,kendo-chart,kendo-template,Javascript,Kendo Ui,Kendo Chart,Kendo Template,我需要自定义剑道折线图的标签(比如泡泡语)。 我构建了一个模板(就像在这个剑道测试中:。我从剑道论坛线程中的管理解决方案中获取了这个演示),它在第一次加载页面时可以工作,但在某些情况下剑道UI不会呈现标签。 这两种情况下会出现问题: 当我用一个按钮手动刷新图表时,若要单击它,您需要 滚动页面 当我刷新页面(F5)之后,我向下滚动页面 我注意到标签的位置根据滚动所给出的从顶部的偏移向上移动 我拉小提琴是为了让你看到第一个案子。 要查看第二种情况的示例,请在全屏页面中查看小提琴,尝试向下滚动并刷新页
函数createChart(){
var dataSource=new kendo.data.dataSource({
数据:[{
类别:“A”,价值:10
}, {
类别:“B”,价值:20
}, {
类别:“C”,价值:30
}]
});
var labelTemplate=kendo.template($(“#labelTemplate”).html();
$(“#图表”)。肯多卡特({
数据源:数据源,系列:[{
类型:“线条”,样式:“平滑”,字段:“值”,类别字段:“类别”,标签:{
可见:true,模板:“#=类别”,可视:函数(e){
var dataItem=$.grep(dataSource.data(),函数(item){
return item.category==e.text;
})[0];
//标签原点位置(与原始标签所在位置相同)
var origin=e.rect.origin;
变量内容=$('')
.css({
位置:“绝对”,
字体:“11px Arial,Helvetica,无衬线”,
左:0,,
排名:0
})
.appendTo(document.body)
.html(labelTemplate(dataItem));
var visual=new kendo.drawing.Group();
kendo.drawing.drawDOM(内容).done(函数(组){
//将绘制的形状放置在原始标签位置
group.transform(kendo.geometry.transform().translate(origin.x,origin.y));
视觉附加(组);
//从DOM中删除元素
content.remove();
});
返回视觉;
}
}
}]
});
}
$(函数(){
createChart();
$(“#刷新图表”)。在(“单击”,函数(){
$(“#图表”).data(“kendoChart”).refresh();
})
});代码>
.talk bubble{
宽度:自动;
高度:自动;
背景色:红色;
颜色:白色;
边界半径:30px;
}
.talktext{
填充:1em;
文本对齐:左对齐;
线高:1.5em;
}
.talktext p{
/*删除webkit页边距*/
-之前的webkit页边距:0em;
-webkit页边距:0em;
}
无标题
向下点击按钮
点击按钮
刷新图表
现在向上,标签未渲染
Value:#=kendo.format('{0:n2}',data.Value)#
为什么不将其更改为工具提示?这将是非常清楚的,因为用户希望点做一些事情。因为我想看到标签的所有时间不仅在悬停为什么不改变这一点作为一个工具提示?这将是非常清楚的,因为用户希望点做一些事情。因为我希望看到标签的所有时间,而不仅仅是在悬停