0

我想在 Nativescript Vue 应用程序中实现带有填充和未填充蜡烛的 CandleStickChart。如果我没有指定strokeColorsand fillColors，我会得到一个蓝色图表，它会根据开盘价大于收盘价产生填充/未填充的蜡烛，反之亦然。

示例（项目中有数据）：

  items = [
    { Date: '01/6/2015', Open: 100, Close: 85, Low: 50, High: 139 },
    { Date: '27/7/2015', Open: 60, Close: 150, Low: 40, High: 159 },
    { Date: '18/8/2015', Open: 120, Close: 81, Low: 45, High: 141 },
    { Date: '19/9/2015', Open: 60, Close: 150, Low: 40, High: 159 },
    { Date: '20/9/2015', Open: 105, Close: 200, Low: 55, High: 250 }
  ]

<RadCartesianChart width="100%" height="50%" allowAnimations="true">

  <DateTimeCategoricalAxis v-tkCartesianHorizontalAxis dateFormat="yyyy-MM-dd" verticalLocation="Bottom">
  </DateTimeCategoricalAxis>
  <LinearAxis v-tkCartesianVerticalAxis></LinearAxis>
  <CandleStickSeries v-tkCartesianSeries
    categoryProperty="Date"
    openPropertyName="Open"
    highPropertyName="High"
    lowPropertyName="Low"
    closePropertyName="Close"
    strokeWidth="1"
    :items="items" />
</RadCartesianChart>

... 结果是：

在此处输入图像描述

一旦我像这样指定颜色：

<RadCartesianChart width="100%" height="50%" allowAnimations="true">

  <DateTimeCategoricalAxis v-tkCartesianHorizontalAxis dateFormat="yyyy-MM-dd" verticalLocation="Bottom">
  </DateTimeCategoricalAxis>
  <LinearAxis v-tkCartesianVerticalAxis></LinearAxis>
  <CandleStickSeries v-tkCartesianSeries
    categoryProperty="Date"
    openPropertyName="Open"
    highPropertyName="High"
    lowPropertyName="Low"
    closePropertyName="Close"
    strokeWidth="1"
    strokeColors="#464D57,#464D57"
    fillColors="#00B061,#FF3030"
    :items="items" />
</RadCartesianChart>

结果如下：

在此处输入图像描述

... 这是很好的颜色，但图表失去了绘制填充或未填充蜡烛的功能。有谁知道如何取回这个？

不幸的是，我找不到任何描述可能选项的文档，有没有人知道RadCartesianChart一般的好资源（Nativescript 文档真的很糟糕）？

PS：我正在使用 NativeScript 8.1.4 和 nativescript-ui-chart 9.0.1

谢谢您的帮助！

4

0 回答 0