search

tradingview / lightweight-charts

Performant financial charts built with HTML5 canvas
https://www.tradingview.com/lightweight-charts/
Apache License 2.0
9.32k stars 1.61k forks source link

How to set the time zone of the X axis #221

Closed liubin595338764 closed 4 years ago

liubin595338764 commented 5 years ago

https://jsfiddle.net/TradingView/bmL0vont/

image

How can I set the time zone of the X axis? My local is the +8 time zone, but it shows the time in the 0 time zone.

time: 1556877600 Should show 2019/05/03 18:00:00

timocov commented 5 years ago

Sorry, but we don't understand Chinese. Please use English.

liubin595338764 commented 5 years ago

@timocov hi, I have changed to English.

liubin595338764 commented 5 years ago

And the x-axis time will show an exception on some browsers.

image

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
    </head>
    <body>
        <script>
            const chart = LightweightCharts.createChart(document.body, {
                width: document.body.clientWidth,
                height: 300,
                localization: {
                    dateFormat: 'yyyy-MM-dd'
                },
                timeScale: {
                    timeVisible: true,
                    secondsVisible: false
                }
            });
            const lineSeries = chart.addLineSeries();
            var list = [{ time: 1556877600, value: 230.12 }];
            for (var i = 0; i < 100; i++) {
                var value = Math.random() * (100 - 70) + 70;
                var time = Date.now() - i * 1000 * 60;
                time = Math.floor(time / 1000);
                list.push({ time: time, value: value.toFixed(5) * 1 });
            }
            lineSeries.setData(list);
        </script>
    </body>
</html>
timocov commented 5 years ago

How can I set the time zone of the X axis?

https://github.com/tradingview/lightweight-charts/issues/125#issuecomment-511307557

And the x-axis time will show an exception on some browsers.

What the browser you have?

liubin595338764 commented 5 years ago

QQ browser new Date().toLocaleString() The time you get in this browser is CST time

liubin595338764 commented 5 years ago

QQ browser && HUAWEI mobile phone browser: console.log(new Date().toLocaleString()) => Tue Sep 24 2019 22:46:07 GMT+0800 (CST)

chrome browser: console.log(new Date().toLocaleString()) => 2019/9/24 下午10:45:48

Expect to set the x-axis time format

timocov commented 5 years ago

QQ browser && HUAWEI mobile phone browser:

Can you please try to set formatOptions like we use them here: https://github.com/tradingview/lightweight-charts/blob/b88c8b5844f0aeb171903c8afc784b9f30b49541/src/model/time-scale.ts#L649-L687

It's possible that this browser doesn't support them.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString#Browser_compatibility

liubin595338764 commented 5 years ago

hi, timocov. I don't know how to use this method, can you give me a list?

The options parameter of toLocaleString is still not supported by some browsers. I think it needs to be implemented from other aspects, not too dependent on the options parameter.

liubin595338764 commented 5 years ago

@timocov 

<div id="time"></div>
<script>
var time = document.querySelector('#time');
time.innerHTML = new Date().toLocaleString('cn', { hour12: false, hour: '2-digit', minute: '2-digit' });
</script>

chrome browser: 13:42

QQ browser && HUAWEI mobile phone browser: Wed Sep 25 2019 13:42:09 GMT+0800 (CST)

image

timocov commented 5 years ago

@liubin595338764 these options are supported even by IE11. I think there is polyfill for that method so you can put it on your page for that browsers.

The options parameter of toLocaleString is still not supported by some browsers

According to the https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString#Browser_compatibility the options doesn't supported in Android WebView only, and I don't think that there is a lot of devices with that webview (afaik in the latest versions of Android (starting from Android 5 I guess) it uses Chrome WebView in common case). I don't why QQ browser doesn't support this parameter so far, but I said - you can try to put polyfills to your page to avoid this issue.

liubin595338764 commented 5 years ago

@timocov About Date's polyfills only Date.now and Date.prototype.toISOString;

QQ browser && HUAWEI mobile phone browser has a very large user volume in China

The locales and options arguments are not supported in all browsers yet. To check whether an implementation supports them already, you can use the requirement that illegal language tags are rejected with a RangeError exception:

timocov commented 5 years ago

QQ browser && HUAWEI mobile phone browser has a very large user volume in China

I don't argue with you, I don't understand why this browser doesn't support new standard yet. IE11 was released a long time ago and it supports options argument, the same about Safari 10. We've used some features from es2015 (like Set/Map) and we don't provide any polyfills. If you want to support old browsers or browsers which doesn't support some features, you need to use polyfills.

About Date's polyfills only Date.now and Date.prototype.toISOString;

What do you mean?

liubin595338764 commented 5 years ago

What do you mean?

Date's polyfills only Date.now and Date.prototype.toISOString; I haven't found this toLocaleString polyfill. Can you help me?

timocov commented 5 years ago

Try to look at some intl.js polyfills - might be they help https://github.com/andyearnshaw/Intl.js

liubin595338764 commented 5 years ago

Intl.js solves the problem of HUAWEI mobile phone browser, but it does not solve the problem of QQ browser.

liubin595338764 commented 5 years ago

Is there any other way?

timocov commented 5 years ago

@liubin595338764 I cannot tell you for sure, but you can try to implement that polyfill yourself. As I said, it's really strange that QQ browser still doesn't support that method and I would suggest to ask developers why they don't implement it yet.

liubin595338764 commented 4 years ago

thank you so much

timocov commented 4 years ago

Hey @liubin595338764, in #386 we've added ability to override default formatter of tick marks, so you can override it to avoid using toLocaleString in your build. It'll be released in 3.0 version.

YaoKaiLun commented 4 years ago

I think the problem is here.

WX20200501-103200@2x