私は JavaScript と C# の世界では初心者なので、一部のロジックの弱点をご容赦ください。
バインドされたデータをビュー (report.regional.html、リンク「国別レポートの表示」を使用) からビューモデル (report.regional.js、関数「CountryRep」) に移動し、次を使用してグラフをプロットしようとしています。ビューモデルのこのデータは、div 'CountryRepMod' のビューに返されます。
HTML の最初の部分:
<div class="well">
<table class="table table-striped table-hover table-condensed" style="padding-bottom: 0px;margin-bottom: 0px;">
<thead>
<tr>
<th>Country</th>
<th>Total Deals</th>
<th>Total Open deals</th>
<th>Total Open Yellow deals</th>
<th>Total open red deals</th>
<th>Total closed/terminated</th>
<th>Days elapsed pre CC to PS Open deals</th>
<th>Business to instruct legal (Average)</th>
<th>Lawyer TAT to draft (Average)</th>
<th>Action</th>
</tr>
</thead>
<tbody data-bind="foreach: deals">
<tr>
<td><span data-bind="text: Name"></span></td>
<td><span data-bind="text: TotalDeals"></span></td>
<td><span data-bind="text: TotalOpenDeals"></span></td>
<td><span data-bind="text: TotalYellowDeals"></span></td>
<td><span data-bind="text: TotalRedDeals"></span></td>
<td><span data-bind="text: TotalClosedTermDeals"></span></td>
<td> </td>
<td><span data-bind="text: BusinessToInstLegal"></span></td>
<td><span data-bind="text: LawyerTAT"></span></td>
<td> <a href="javascript:void(0)" data-bind='click: $parent.CountryRep'>View Country Report</a>
</td>
</tr>
</tbody>
</table>
</div>
[View Country Rep] をクリックすると、バインドされたすべてのデータが js ファイルのこのメソッドに送信されます。
self.CountryRep = function (obj) {
data[0].Name = obj.Name;
data[0].TotalDeals = obj.TotalDeals;
data[0].TotalOpenDeals = obj.TotalOpenDeals;
data[0].TotalClosedTermDeals = obj.TotalClosedTermDeals;
data[0].TotalYellowDeals = obj.TotalYellowDeals;
data[0].TotalRedDeals = obj.TotalRedDeals;
data[0].BusinessToInstLegal = obj.BusinessToInstLegal;
data[0].LawyerTAT = obj.LawyerTAT;
PlotCountry(data);
}
次に、PlotCountry は次のようにグラフをプロットする必要があります。
function PlotCountry (data){
$("#CountryRepMod").livequery(function () {
title('Country report for ' + data[0].Name);
$.jqplot.config.enablePlugins = true;
var s1 = [data[0].TotalDeals, data[0].TotalOpenDeals, data[0].TotalYellowDeals, data[0].TotalRedDeals, data[0].TotalClosedTermDeals, data[0].LawyerTAT];
var ticks = ['Total deals', 'Total open deals', 'Open with expired credit sanctions', 'Open deals within 30 days of expiry of credit sanction', 'Total closed/Terminated deals', 'Total TAT to draft (average)'];
var plot1 = $.jqplot('CountryRepMod', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
varyBarColor: true,
barWidth: 10
},
pointLabels: { show: true },
highlightMouseDown: true
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30
}
},
axes: {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {fillToZero: true},
highlightMouseDown: true
},
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
}
});
$('#CountryRepMod').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info1').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
}
);
});
$('#CountryRepMod').modal('show');
}
次に、データを div に取得します。
<div class="modal hide fade" id="CountryRepMod" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Country Report</h3>
</div>
<div class="modal-body">
<hr />
<table class="table table-striped table-hover" style="padding-bottom: 0px;margin-bottom: 0px;">
<thead>
<tr>
<th>Country</th>
<th>Total Deals</th>
<th>Total Open deals</th>
<th>Total Open Yellow deals</th>
<th>Total open red deals</th>
<th>Total closed/terminated</th>
<th>Days elapsed pre CC to PS Open deals</th>
<th>Business to instruct legal (Average)</th>
<th>Lawyer TAT to draft (Average)</th>
</tr>
</thead>
<tbody data-bind="foreach: deals">
<tr>
<td><span data-bind="text: Name"></span></td>
<td><span data-bind="text: TotalDeals"></span></td>
<td><span data-bind="text: TotalOpenDeals"></span></td>
<td><span data-bind="text: TotalYellowDeals"></span></td>
<td><span data-bind="text: TotalRedDeals"></span></td>
<td><span data-bind="text: TotalClosedTermDeals"></span></td>
<td> </td>
<td><span data-bind="text: BusinessToInstLegal"></span></td>
<td><span data-bind="text: LawyerTAT"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
</div>
</div>
</div>
ただし、[国別レポートを表示] をクリックすると、ページが読み込まれず、ホームページに移動するだけです。実際、CountryRep にはブレークポイントを置いたので、そこには入っていないようです。
何かご意見は？