剑道图 - Angular2选择我的数据将使用哪个轴

时间:2018-02-12 12:52:57

标签: angular charts kendo-ui

我正在尝试使用具有不同Y轴的两个单独数据集来执行散点图。

第二个系列应该使用第二个Y轴,我该如何实现呢?

<kendo-chart [title]="" style="height:290px">
  <kendo-chart-series>
    <kendo-chart-series-item type="scatterLine"
                             [data]="chartRunData"
                             xField="date" yField="duration">
    </kendo-chart-series-item>

    <kendo-chart-series-item type="scatter"
                             [data]="chartAlarmData"
                             xField="date" yField="level"  >
    </kendo-chart-series-item>



  </kendo-chart-series>

  <kendo-chart-x-axis>
    <kendo-chart-x-axis-item [title]="{ text: 'Time' }" [max]="maxDate" [min]="minDate">
    </kendo-chart-x-axis-item>
  </kendo-chart-x-axis>
  <kendo-chart-y-axis> 
    <kendo-chart-y-axis-item [title]="{ text: 'Duration [seconds]' }">
    </kendo-chart-y-axis-item>
    <kendo-chart-y-axis-item [title]="{ text: 'Alarm Level' }" [max]="5" min="0">
    </kendo-chart-y-axis-item>
  </kendo-chart-y-axis>
</kendo-chart>

1 个答案:

答案 0 :(得分:0)

非常简单的答案 - 指定yAxis名称。

<kendo-chart [title]="" style="height:290px">
  <kendo-chart-series>
    <kendo-chart-series-item type="scatterLine"
                             [data]="chartRunData"
                             xField="date" yField="duration">
    </kendo-chart-series-item>

    <kendo-chart-series-item type="scatter"
                             [data]="chartAlarmData"
                               yField="level" yAxis="'alarmLevel'" >
    </kendo-chart-series-item>



  </kendo-chart-series>

  <kendo-chart-x-axis>
    <kendo-chart-x-axis-item [title]="{ text: 'Time' }" [max]="maxDate" [min]="minDate">
    </kendo-chart-x-axis-item>
  </kendo-chart-x-axis>
  <kendo-chart-y-axis> 
    <kendo-chart-y-axis-item [title]="{ text: 'Duration [seconds]' }">
    </kendo-chart-y-axis-item>
    <kendo-chart-y-axis-item [title]="{ text: 'Alarm Level' }" [max]="5" min="0" name="'alarmLevel'">
    </kendo-chart-y-axis-item>
  </kendo-chart-y-axis>
</kendo-chart>