英文:
5 minute Tradingview Lightweight Candlestick chart not working in Angular
问题
我使用Angular 13.2和TradingView Lightweight charts 3.8.0。
我希望绘制5分钟K线图数据。但它只显示一个间隔,即2018年6月25日00:00:00,所有数据都显示在这个单一间隔上。
我使用以下命令安装:npm install --save lightweight-charts --legacy-peer-deps
Lightweight Charts版本: ^3.8.0
重现步骤/代码:
import { createChart } from 'lightweight-charts';
const chart = createChart('tv_test', {
width: 1200,
height: 600,
timeScale: {
visible: true,
timeVisible: true,
secondsVisible: true,
},
});
const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData([
{ time: '2018-06-25T09:15:00.000Z', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
{ time: '2018-06-25T09:20:00.000Z', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
{ time: '2018-06-25T09:25:00.000Z', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
{ time: '2018-06-25T09:30:00.000Z', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
{ time: '2018-06-25T09:35:00.000Z', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
{ time: '2018-06-25T09:40:00.000Z', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
{ time: '2018-06-25T09:45:00.000Z', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
{ time: '2018-06-25T09:50:00.000Z', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
{ time: '2018-06-25T09:55:00.000Z', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
{ time: '2018-06-25T10:00:00.000Z', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);
chart.timeScale().fitContent();
屏幕截图:
[
英文:
I'm using Angular 13.2 and TradingView Lightweight charts 3.8.0
I wish to plot 5 minute candlestick data. But it shows me only one interval 25 Jun '18 00:00:00 with all data on on this single interval.
I installed using: npm install --save lightweight-charts --legacy-peer-deps
Lightweight Charts Version: ^3.8.0
Steps/code to reproduce:
import { createChart } from 'lightweight-charts';
const chart = createChart('tv_test', {
width: 1200,
height: 600,
timeScale: {
visible: true,
timeVisible: true,
secondsVisible: true,
},
});
const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData([
{ time: '2018-06-25T09:15:00.000Z', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
{ time: '2018-06-25T09:20:00.000Z', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
{ time: '2018-06-25T09:25:00.000Z', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
{ time: '2018-06-25T09:30:00.000Z', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
{ time: '2018-06-25T09:35:00.000Z', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
{ time: '2018-06-25T09:40:00.000Z', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
{ time: '2018-06-25T09:45:00.000Z', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
{ time: '2018-06-25T09:50:00.000Z', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
{ time: '2018-06-25T09:55:00.000Z', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
{ time: '2018-06-25T10:00:00.000Z', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);
chart.timeScale().fitContent();
Screenshots:
答案1
得分: 1
Lightweight Charts不支持以该格式的time
值。支持的格式在这里提到:https://tradingview.github.io/lightweight-charts/docs/api#time
为使您的示例工作,您应该使用本机的Date
构造函数将该日期字符串转换为时间戳。Lightweight Charts期望时间戳以秒为单位,而不是毫秒,因此该值需要除以1000。
function convertDate(dateString) {
return new Date(dateString).valueOf() / 1000;
}
以下是您代码的一个可工作示例:https://codesandbox.io/s/timestamps-dkqr2w
英文:
Lightweight Charts doesn't support time
values in that format.
The supported formats are mentioned here: https://tradingview.github.io/lightweight-charts/docs/api#time
To get your example to work, you should use the native Date
constructor to convert that date string into a timestamp. Lightweight charts expects the timestamp to be in seconds, not milliseconds, so the value will need to be divided by 1000.
function convertDate(dateString) {
return new Date(dateString).valueOf() / 1000;
}
Here is a working example of your code: https://codesandbox.io/s/timestamps-dkqr2w
答案2
得分: 0
以下是翻译好的部分:
candlestickSeries.setData([
{ time: '2018-06-25T09:15:00.000Z', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
{ time: '2018-06-25T09:20:00.000Z', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
{ time: '2018-06-25T09:25:00.000Z', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
{ time: '2018-06-25T09:30:00.000Z', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
{ time: '2018-06-25T09:35:00.000Z', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
{ time: '2018-06-25T09:40:00.000Z', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
{ time: '2018-06-25T09:45:00.000Z', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
{ time: '2018-06-25T09:50:00.000Z', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
{ time: '2018-06-25T09:55:00.000Z', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
{ time: '2018-06-25T10:00:00.000Z', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
].map((d) => {
return { ...d, time: moment(d.time).utcOffset(0, true).valueOf() / 1000 };
}));
不含翻译的代码部分已被保留。
英文:
Use the following
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
candlestickSeries.setData([
{ time: '2018-06-25T09:15:00.000Z', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
{ time: '2018-06-25T09:20:00.000Z', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
{ time: '2018-06-25T09:25:00.000Z', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
{ time: '2018-06-25T09:30:00.000Z', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
{ time: '2018-06-25T09:35:00.000Z', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
{ time: '2018-06-25T09:40:00.000Z', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
{ time: '2018-06-25T09:45:00.000Z', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
{ time: '2018-06-25T09:50:00.000Z', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
{ time: '2018-06-25T09:55:00.000Z', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
{ time: '2018-06-25T10:00:00.000Z', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
].map((d) => {
return { ...d, time: moment(d.time).utcOffset(0, true).valueOf() / 1000 };
}));
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论