Question

我是高级图表的新手。我已经使用highcharts创建了基本折线图。现在，我想使用日期范围过滤数据。我该怎么做？我正在将API调用到AngularJS，因此在AngularJS中进行编码将对您有所帮助。

I have tried using SetData and SetExtremes but could not really understand how it works.
https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
https://api.highcharts.com/class-reference/Highcharts.Series#setData

//HTML
<div class="chart-container">
            <canvas id="tempchartcanvas" style="padding-top:10px; height:210px;width:100%"></canvas>
        </div>

//AngularJS 

vm.TemperatureChart = function () {
        var URL = url + "temperaturesensor/tempdata";
        $http.get(URL).then(function (response) {
            vm.TempChartData = [];
            vm.TempInsertDate = [];
            vm.TemperatureTableData = response.data;

            angular.forEach(response.data, function (value, key) {
                var obj = { Data: value.Data, ModifiedInsertDate: moment(value.ModifiedInsertDate).format('MM') };
                vm.TempChartData.push(obj.Data);              
                vm.TempInsertDate.push(obj.ModifiedInsertDate);

                var ctx = document.getElementById("tempchartcanvas");

                var data = {
                    labels: vm.TempInsertDate,
                    datasets: [
                        {
                            label: "Temp",
                            data: vm.TempChartData,
                            backgroundColor: "darkblue",
                            borderColor: "blue",
                            fill: false,
                            lineTension: 0,
                            pointRadius: 0
                        },                     
                    ]
                };

                Chart.pluginService.register({
                    beforeDraw: function (chart, easing) {
                        if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
                            var helpers = Chart.helpers;
                            var ctx = chart.chart.ctx;
                            var chartArea = chart.chartArea;

                            ctx.save();
                            ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
                            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
                            ctx.restore();
                        }
                    }
                });

                var options = {
                    credits: {
                        enabled: false
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                    title: {
                        display: false,
                        position: "top",
                        text: "Temperature",
                        fontSize: 18,
                        fontColor: "#111"
                    },
                    legend: {
                        //labels: { fontColor: 'blue' , fontSize:20},
                        display: true,
                        position: "top"
                    },
                    chartArea: {
                        backgroundColor: "rgba(220,220,220,0.5)"
                    },
                    scales: {
                        xAxes: [{
                            gridLines: {
                                display: false

                            },
                            ticks: {
                                display: true,
                                fontSize: 10,
                                //fontFamily: "Abhaya Libre",
                            }
                        }],
                        yAxes: [{
                            gridLines: {
                                display: false
                            },
                            ticks: {
                                beginAtZero: true,
                                //fontColor: 'green',
                                fontSize: 15
                            }
                        }]
                    }
                };

                var chart = new Chart(ctx, {
                    type: "line",
                    data: data,
                    options: options
                });
            });
        });
    }

我想使用数据库中的“从”和“到”日期来过滤统计图。

Answer 1

我认为这个example会有所帮助。它基于此previous SO answer。

$(function() {

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container'
            },
            rangeSelector: {
                selected: 1,
                inputDateFormat: '%Y-%m-%d'
            },

            title: {
                text: 'AAPL Stock Price'
            },

            series: [{
                name: 'AAPL',
                data: data,
                tooltip: {
                    valueDecimals: 2
                }}]

        }, function(chart) {

            // apply the date pickers
            setTimeout(function() {
                $('input.highcharts-range-selector', $('#' + chart.options.chart.renderTo)).datepicker()
            }, 0)
        });
    });


    // Set the datepicker's date format
    $.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd',
        onSelect: function(dateText) {
            chart.xAxis[0].setExtremes($('input.highcharts-range-selector:eq(0)').datepicker("getDate").getTime(), $('input.highcharts-range-selector:eq(1)').datepicker("getDate").getTime()); 
            //this.onchange();
            this.onblur();
        }
    });

});

如何使用highcharts将日期范围过滤器传递到折线图？

1 个答案: