0
私は剣道図を使ってトレンドラインを描画している列の1つのグリッドを持っています。 問題はグラフが行の1つにしか表示されず、ページをリフレッシュするとグラフの行の位置が変わることがあります。時には全く表示されない（スクリーンショットが添付されています） 私は試しましたユニークなdivIdを渡し、ユニークなチャート名は運がないjavascript関数に渡します。私が見つからない唯一のものは、Javascript関数からJsRenderへの返信文です。私は剣道として返すことができません。 ここに私のJsRenderがあります。コードとJavascriptヘルパー機能。また、トレンドラインのスクリーンショットも含まれています。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スニペット-----------
---------- Beging HelperFunctionトレンド------ここ
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
}
});
}
あなたにボリスをありがとう！自分のコードを自分のコードベースに統合しましたが、データグリッドの最初の行のチャートレンダリングと同じ問題が残っています – user2048598
私は – user2048598
の上に更新されたコードを追加しましたが、テンプレートに '{kendochart} '