具有JSRender + Javascript功能的Kendo图表
[英]Kendo Chart With JSRender+Javascript Function
问题描述
我有一个网格，在其中我正在使用Kendo Chart绘制趋势线的一列。 问题是图表仅显示在其中一行中，当我刷新页面时，它更改了图形显示在该行上的位置。有时根本不显示它。 divId是JavaScript函数的唯一图表名称，没有运气。 {{：〜trend（'Mydiv'，＃parent.parent.data）}}我唯一缺少的是从Javascript函数到JsRender的return语句，我无法将其作为kendoChart返回。这是我的JsRender代码， JavaScript辅助函数。还包括趋势线的屏幕截图。
script id="customGridTemplate" type="text/x-jsrender">
<div class="table-wrapper dashboard-grid" id="main">
{^{for data)}}
{{!-- Get Column Headers --}}
{{if #getIndex() == 0}}
<div class="table-head">
{{props}}
{{for key}}
<div class="table-col">
<div class="table-th">{{:}}</div>
</div>
{{/for}}
{{/props}}
</div>
{{/if}}
{{/for}}
{^{for data}}
<div class="table-row">
{{!-- Get Rows --}}
{{props}}
{{for}}
<div class="table-col">
<div class="table-th">{{if key=='' || key == null}} {{else}} {{>key}} {{/if}}</div>
<div class="table-td">
{{if #getIndex() == 0}}
<img title="Summary" id="displaySummary" data-link="name{:prop}" src="/Images/InfoImgIcon.png" alt="" height="16" width="14" />
{{if prop=='' || prop == null}} {{else}} {{:prop}} {{/if}}
{{else key=='Trend'}}
<div id="Mydiv">{{:~trend('Mydiv',#parent.parent.data)}}</div>
</div>
{{else key=='Status'}}
{{if prop=='-1'}} <div><img title="" id="imgSquare" src="/Images/square.svg" alt="" height="16" width="14" /></div> {{/if}}
{{if prop=='0'}} <div><img title="" id="imgTriangle" src="/Images/triangle.svg" alt="" height="16" width="14" /></div> {{/if}}
{{if prop=='1'}} <div><img title="" id="imgCircle" src="/Images/circle.svg" alt="" height="16" width="14" /></div> {{/if}}
{{else}}
{{if prop=='' || prop == null}} {{else}} {{:prop}} {{/if}}{{/if}}
</div>
<div class="clear"></div>
</div>
{{/for}}
{{/props}}
</div>
{{/for}}
</div>
<div class="modal fade" data-link="id{:~WidgetId}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Metric Summary</h4>
</div>
<div class="modal-body">
<table class=" table table-striped table-condensed">
<tbody>
<tr>
<td width="65%">
<table width="100%">
<tbody>
<tr>
<td colspan="2">
<table>
<tbody>
<tr><td>Metric Definition: </td><td> {{:Summary.MetricDefinition}}</td></tr>
<tr><td>Metric Owner: </td><td>{{:Summary.MetricOwner}}</td></tr>
</tbody>
</table>
</td>
</tr>
<tr style="border-bottom: 1px solid #E8E8E8"><td colspan="2"></td></tr>
<tr>
<td width="32%">
<ul type="square" style="color:#5cb85c"><li><span style="color:#000000">Highlights:</span></li></ul>
{{for Summary}}
{{props CommentaryHighlights}}
{{>prop}}<br />
{{/props}}
{{/for}}
</td>
<td width="32%">
<ul type="square" style="color: #d9534f;"><li><span style="color:#000000">Lowlights:</span></li></ul>
{{for Summary}}
{{props CommentaryLowlights}}
{{>prop}}<br />
{{/props}}
{{/for}}
</td>
</tr>
</tbody>
</table>
</td>
<td width="35%" height="100%">
<div><table><tbody><tr><td>Graph Filter</td><td>
<select name="cars">
<option value="YoY">YoY</option>
<option value="MoM">MoM</option>
</select>
</td></tr></tbody></table></div>
<div style="border: 1px solid #E8E8E8; height: 200px;">
<div id="chart"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" id="btnClose" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
--------结束JSRender代码段-----------
---------- Being Helper功能趋势------
function BindTrendLineChart(TrendDivId, MetricTrendData) {
[![enter image description here][1]][1]
var trendLineDataSource = TrendLineDataSource(MetricTrendData)
$("#" + TrendDivId).kendoChart({
dataSource: {
data: trendLineDataSource,
group: {
field: "data"
}
},
series: [{
type: "line",
field: "value",
style: "smooth",
markers: {
visible: false
}
}],
categoryAxis: {
title: {
text: ""
},
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
},
valueAxis: {
max: 3,
title: {
text: "voltage"
},
majorGridLines: {
visible: false
},
visible: false
},
chartArea: {
width: 100,
height: 30
},
legend: {
position: "custom",
orientation: "horizontal",
visible: false
}
});
}
2 个解决方案
解决方案1
0 2016-05-29 17:59:44
这里的问题是您没有考虑JsViews的处理模型。 您的{{:~trend('Mydiv',#parent.parent.data)}}帮助函数在呈现模板的过程中被调用（这是link(...)方法的第一阶段）。 只有在此之后，渲染的输出才会插入DOM。
所以，如果你只是简单地把一个JavaScript断点在你的代码为： $("#" + TrendDivId).kendoChart({...你会看到$("#" + TrendDivId)返回null -自认为<div>在DOM中尚不存在。
正确的做法是在发生数据链接后呈现图表。 一种精巧的方法是为Kendo图表定义JsViews标记控件，然后在标记控件的onAfterLink处理程序中进行图表的呈现。
// Define a kendochart tag
$.views.tags("kendochart", {
onAfterLink: function(tagCtx, linkCtx) {
// Bind to the data-linked element, and pass the data argument
$(linkCtx.elem).kendoChart(tagCtx.args[0]);
}
});
然后可以在模板中使用它，如下所示：
<div data-link="{kendochart chartdata}"></div>
这是一个工作示例： https : //jsfiddle.net/BorisMoore/uvcrvepL/
解决方案2
0 2016-06-01 03:04:12
DrillDownGrid.Cshtml
<script id="customGridTemplate" type="text/x-jsrender">
<div class="table-wrapper dashboard-grid" id="main">
{^{for data)}}
{{!-- Get Column Headers --}}
{{if #getIndex() == 0}}
<div class="table-head">
{{props}}
{{for key}}
<div class="table-col">
<div class="table-th">{{:}}</div>
</div>
{{/for}}
{{/props}}
</div>
{{/if}}
{{/for}}
{^{for data}}
<div class="table-row">
{{!-- Get Rows --}}
{{props}}
{{for}}
<div class="table-col">
<div class="table-th">{{if key=='' || key == null}} {{else}} {{>key}} {{/if}}</div>
<div class="table-td">
{{if #getIndex() == 0}}
<img title="Summary" id="displaySummary" data-link="name{:prop}" src="/Images/InfoImgIcon.png" alt="" height="16" width="14" />
{{if prop=='' || prop == null}} {{else}} {{:prop}} {{/if}}
{{else key=='Trend'}}
<div>
<div id="Content">{{:~trend(#parent.parent.parent.parent.data.MetricId,#parent.parent.data)}}</div>
----------------------------------结束片段-------------- ----------------------
Drilldowngrid.js：
function BindTrendLineChart(TrendDivId, MetricTrendData) {
debugger;
var app = {
chartdata: {
title: "",
seriesDefaults: {
type: "line",
style: "smooth"
},
series: [
{ name: "Example Series", data: [.20, .30, .40, .50, .60, .70, .70, .70, .70, 1] }
],
categoryAxis: {
title: {
text: ""
},
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
},
valueAxis: {
max: 3,
title: {
text: "voltage"
},
majorGridLines: {
visible: false
},
visible: false
},
chartArea: {
width: 100,
height: 30
},
legend: {
position: "custom",
orientation: "horizontal",
visible: false
}
}
};
$.views.tags("kendochart", { // Define a kendochart tag
onAfterLink: function (tagCtx, linkCtx) {
$(linkCtx.elem).kendoChart(tagCtx.args[0]); // Bind to the data-linked element
}
});
$.link.theTmpl("#Content", app);
}
如何使用javascript更改ASP .Net MVC Kendo图表的模型？
[英]How to change the model of an ASP .Net MVC Kendo Chart using javascript?
使用CSS / JavaScript更改Kendo Chart工具提示文本的颜色
[英]Change Kendo Chart tooltip text color using CSS/JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.