时间戳

首页 > 解决方案 > Highcharts 范围选择器按钮和输入过滤器不起作用

django - Highcharts 范围选择器按钮和输入过滤器不起作用

问题描述

我在 Django 中使用 Highcharts 创建了一个图表，但范围选择器按钮不起作用，输入范围从 1970 年开始，而不是我的第一个日期。我想这与日期格式有关，但我无法弄清楚...

我正在读取一个 JSON 文件内容，其中包含以毫秒为单位的日期条目，例如：1527465600000。

图表显示得很好，图表底部的范围选择器也工作得很好，并且 X 轴上的日期按预期很好地格式化了。我想要的是范围选择器按钮工作，并且范围选择器输入过滤器从我的第一个日期开始，而不是从 1970 年 1 月 1 日开始。

这是我的highcharts代码：

{% block javascripts %}

{% load static %}

    <script src="https://code.highcharts.com/stock/highstock.js"></script>

    <script>
        fetch("{% static 'highcharts_1.json' %}")
        .then(response => response.json())
        .then(mydata => {
            console.log(mydata.sample1,mydata.dates)

            Highcharts.chart('mychart_1', {
              
                chart: {
                    zoomType: 'x',
                    type: 'spline',
                },

                xAxis: {
                    type: 'category',
                    categories: mydata.dates,
                    labels:{
                        formatter: function() { 
                            return Highcharts.dateFormat('%d %b %Y', 
                                                        this.value); 
                        },
                        align: 'right',
                        rotation: -90,
                    },
                },

                yAxis: {
                    min: 0,
                    max: 1,
                    tickInterval: 0.1,
                    title: {
                        text: 'Score'
                    }
                },

                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },

                credits :  {
                    enabled : false
                    },
                
                navigator :{
                    enabled: true
                },

                scrollbar :{
                    enabled: true
                },

                rangeSelector: {
                    enabled: true,
                    allButtonsEnabled: true,
                    inputEnabled: true,
                    buttons: [{
                        type: 'month',
                        count: 1,
                        text: '1m'
                    }, {
                        type: 'month',
                        count: 3,
                        text: '3m'
                    }, {
                        type: 'month',
                        count: 6,
                        text: '6m'
                    }, {
                        type: 'ytd',
                        text: 'YTD'
                    }, {
                        type: 'all',
                        text: 'All'
                    }],
                    selected: 3
                },

                series: [{
                    name: 'sample1',
                    data: mydata.sample1,
                }],

                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false,
                        },
                    },
                },

                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 1000
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }

                });
        });
    </script>

{% endblock javascripts %}

谢谢你的帮助 ！这是我正在使用的代码的小提琴：https ://jsfiddle.net/ssoj_tellig/408xoat9/13/

标签： djangohighcharts

解决方案

如果你想让 rangeSelector 工作，你需要改变你的数据格式：

const data = [
  [x, y],
  [x, y],
  ...
]

其中 x 是时间格式。基于您的演示：

var mydates = [
  [1527465600000, 29.9],
  [1528070400000, 71.5],
  [1528675200000, 106.4],
  [1529280000000, 129.2],
  [1529884800000, 144.0],
  [1530489600000, 176.0],
  [1531094400000, 135.6],
  [1531699200000, 148.5],
  [1532304000000, 216.4],
  [1532908800000, 194.1],
  [1533513600000, 95.6],
  [1534118400000, 54.4]
];

演示：https ://jsfiddle.net/BlackLabel/p2nmrt6g/

推荐阅读