我想在 Nativescript Vue 应用程序中实现带有填充和未填充蜡烛的 CandleStickChart。如果我没有指定strokeColors
and 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
谢谢您的帮助!