//chart controller to highlight data point
chartChange: function(component, event, helper) {
var filters = event.getParam("data");
var highlight = function(dataset, point){
component.chart.data.datasets[dataset].controller.highlightPoints(point);
}
component.chart.update();
return;
}
// chart component
<aura:handler event="c:ChartUpdate" action="{!c.chartChange}"/>
<aura:registerEvent name="chartEvent" type="c:ChartEvent"/>
<div>
<canvas aura:id="chart" height="380"></canvas>
</div>
// table component
<aura:registerEvent name="chartUpdate" type="c:ChartUpdate"/>
<div class="slds-card__body">
<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="col"><div class="slds-truncate" title="Year">YEAR</div></th>
<th scope="col"><div class="slds-truncate" title="Revenue">REVENUE</div></th>
<th scope="col"><div class="slds-truncate" title="EV">EV</div></th>
<th scope="col"><div class="slds-truncate" title="Revenue">EBITDA</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.Financial_Information}" var="info" indexVar="index">
<tr>
<td><div class="slds-truncate" >{!info.Year__c}</div></td>
<td><div class="slds-truncate"><lightning:formattedNumber style="currency" currencyDisplayAs="code" value="{!info.Revenue__c}"/></div></td>
<td><div class="slds-truncate"><lightning:formattedNumber style="currency" currencyDisplayAs="code" value="{!info.EV__c}"/></div></td>
<td><div class="slds-truncate"><lightning:formattedNumber style="currency" currencyDisplayAs="code" value="{!info.EBITDA__c}"/></div></td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
我正在使用chart.js 2.3并在页面和数据表上有折线图。我希望能够在我的值表中选择一个值,这将使图表的对应点突出显示。我无法弄清楚如何编码。感谢任何提示。