Displaying Persian dates in highchart from its corresponding Georgian date

后端 未结 5 1835
迷失自我
迷失自我 2021-02-04 10:30

Can we use Gregorian dates together with a Georgian to Persian date converter script to show Persian dates in Highchart and Highstock?

相关标签:
5条回答
  • 2021-02-04 10:42

    Update for 2 first answer

    • Mark answer: http://jsfiddle.net/xgru6nya/
    • Taha Jahangir answer: http://jsfiddle.net/ab7kde83/
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/persiandate@0.2.1/dist/persiandate.min.js"></script>
    
    <div id="container" style="height: 400px"></div>
    
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {        
            type: 'datetime',
            labels: {
                formatter: function() {
                    var someDate = new Date(this.value);
                    return persianDate(someDate).format('YYYY-MMMM-D');
                }
            }
        },
        
        
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            pointStart: Date.UTC(2010, 0, 1),
            pointInterval: 24 * 3600 * 1000 // one day
        }]
    });```
    
    
    0 讨论(0)
  • 2021-02-04 10:50

    I developed a Jalali Date library, JDate, that is compatible with original javascript Date class. Dates in highchart/highstock charts can be converted to Jalali by replacing window.Date with JDate. With this method all date outputs is converted to jalali calendar, And also, date input features (like YTD feature, or range selector) works with jalali calendar.

    Demo: https://tahajahangir.github.io/jdate/jalali-highcharts-demo.html Jalali date support for highcharts

    The main part of script in above demo, is:

    <script src="//raw.githack.com/tahajahangir/jdate/master/jdate.min.js"></script>
    <script>
        window.Date = JDate;
        Highcharts.setOptions({
            lang: {
                months: ['فروردين', 'ارديبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
                shortMonths: ['فروردين', 'ارديبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'],
                weekdays: ["یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج‌شنبه", "جمعه", "شنبه"]
            }
        });
    </script>
    
    0 讨论(0)
  • 2021-02-04 10:53

    I borrowed this js script and tried it out here. Not sure if that is what you are after though.

    enter image description here

    0 讨论(0)
  • 2021-02-04 10:54

    You can use it babakhani persian date js for example:


    xAxis: {
                        type: 'datetime',
                        labels: {
                            formatter: function () {
                                var date = new Date(this.value);
                                var pdate = persianDate(date);
                                return (pdate.pDate.year - 1300) + "/" + pdate.pDate.month;
                            }
                        }
                    }
    
    0 讨论(0)
  • 2021-02-04 10:56

    Then better way to override date formating is to use Highcharts.dateFormats (and persianDate library), This allows conversion of all dates (not x or y axis) to Persian calendar.

    Sample: http://jsfiddle.net/smpaB/1/

    Highcharts with persian date

    Add pesianDate library with:

    <script src="http://rawgithub.com/babakhani/PersianDate/master/dist/persian-date.min.js"></script>
    

    And configure highcharts with:

    Highcharts.dateFormats = {
        'a': function(ts){return new persianDate(ts).format('ffffdd')},
        'A': function(ts){return new persianDate(ts).format('ffffdd')},
        'd': function(ts){return new persianDate(ts).format('DD')},
        'e': function(ts){return new persianDate(ts).format('D')},
        'b': function(ts){return new persianDate(ts).format('MMMM')},
        'B': function(ts){return new persianDate(ts).format('MMMM')},
        'm': function(ts){return new persianDate(ts).format('MM')},
        'y': function(ts){return new persianDate(ts).format('YY')},
        'Y': function(ts){return new persianDate(ts).format('YYYY')},
        'W': function(ts){return new persianDate(ts).format('ww')}
    };
    
    0 讨论(0)
提交回复
热议问题