如何动态突出显示折线图中的数据点

时间:2017-08-08 09:58:18

标签: javascript salesforce chart.js salesforce-lightning

//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并在页面和数据表上有折线图。我希望能够在我的值表中选择一个值,这将使图表的对应点突出显示。我无法弄清楚如何编码。感谢任何提示。

0 个答案:

没有答案