Question

我在项目中实现了StockChart。但是，当我移动导航器时，图表也不会移动。好像导航器的移动对图表没有任何影响，与demo不同。

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


  {% block extra_js %}
    <script>
        $('#id_date_to_3').datepicker({
            uiLibrary: 'bootstrap4',
            format: 'yyyy-mm-dd'
        });
        $('#id_date_from_3').datepicker({
            uiLibrary: 'bootstrap4',
            format: 'yyyy-mm-dd'
        });


        $(document).ready(function () {

            interval = 20;

            function getData() {
                station_id = $('#id_station_id').val()
                article_description = $('#id_article_description').val()
                date_from = $('#id_date_from_3').val()
                date_to = $('#id_date_to_3').val()
                var chartData = [];
                query_params = '?date_from=' + date_from + '&date_to=' + date_to + "&station_id=" + station_id + "&article_description=" + article_description

                $.getJSON('/pareto/stability-control-data/' + query_params, function (data) {
                    Highcharts.each(data, function (el) {
                        var item = {
                            x: new Date(el[0]),
                            y: Number(el[1]),
                        };
                        console.log(item);
                        chartData.push(item);

                            var chart = new Highcharts.stockChart('chart-container', {
                                xAxis: {
                                    type: 'datetime',
                                    labels: {
                                        format: '{value:%Y-%m-%d}',
                                        rotation: 45,
                                        align: 'left'
                                    },
                                },
                                yAxis: {
                                    labels: {
                                        format: '{value} %'
                                    }
                                },
                                rangeSelector: {
                                    selected: 1,
                                },
                                series: [{
                                    name: "Failures",
                                    type: 'spline',
                                    tooltip: {
                                        valueDecimals: 2,
                                        valueSuffix: '%'

                                    },
                                    data: chartData,
                                }],
                                title: {text: 'Failure status %'}
                            });

                    });
                });

            };
            $("#submit").click(function () {
                getData();
            });
        });
    </script>
{% endblock %}

那是图表：

enter image description here

和数据：JSON file

编辑：我已经更新了答案。我在JS代码和html标头上添加了更多内容。我试图将代码放在JSFiddle上，但是我无法使其运行。这是代码的链接：https://jsfiddle.net/kashan_91/2a6exny9/11/

我认为数据调用方式或类似的方式存在问题。 Highcharts代码本身不是问题的原因，而是其他JS。

Highcharts Navigator不会更改时间

0 个答案: