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

【问题标题】：Highcharts range selector buttons and input filter not workingHighcharts 范围选择器按钮和输入过滤器不起作用
【发布时间】：2020-12-29 17:07:39
【问题描述】：

我在 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/

【问题讨论】：

我认为您应该使用stockChart 构造函数而不是chart 构造函数，并且您的xAxis.type 应该设置为datetime（默认情况下在Highstock 图表中），而不是category 类型（这可能是问题的原因）。如果该建议没有帮助，请在我可以使用的在线编辑器上重现您的案例。
感谢 Sebastian - 这是我正在使用的代码的一个小技巧：jsfiddle.net/ssoj_tellig/408xoat9/13
我认为这是因为 stockChart 没有读取 xaxis 中的日期......因为我所有的系列共享相同的 X 列表，我只传递系列数据的 y 值，并认为可以将日期列表读取为 xaxis 属性中的类别。但看起来情况并非如此......有什么想法吗？

标签： django highcharts

【解决方案1】：

如果你想让 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/

【讨论】：