Highchart / Highstock数据采样

Question

我正在研究asp.net MVC 5 我想以下列方式对数据进行采样

1. 取两点（下一点 - 前一点）的差异
2. 在时间范围之间绘制它们

我将在短期内解释点数 2 ，请参阅下面的图像以获得视觉理解



红线是两点之间的差异（以点 1 表示）

该图表适用于 energy_kwh

对于 2 点，请采用以下示例

例如， 3 点的值 5 ， 7 ， 9 并且它们与相应的时间，即 3 时间范围可能 2 PM 3 PM 和 4 PM ，但如果我在那里采取差异之类的 7 - 5 = 2 且 9 - 7 = 2 然后我有 2 值/点，但时间仍然 3 < / strong>，我想绘制时间范围之间的新点，如从下午2点到下午3点点 2 所以它会显示在时间之间。

我知道如何区分两点但我无法在图表上绘制它们，因为我不知道如何管理时间范围

Bellow是我的控制器代码

SqlCommand Device_Id_command = new SqlCommand("Select Device_ID, Energy_kWh,Power_kW,Voltage_Phase_1,Data_Datetime,Voltage_Phase_2,Voltage_Phase_3,Current_Phase_1,Current_Phase_2,Current_Phase_3 from [ADS_Device_Data] where Device_Serial_Number=@serial_number AND Data_Datetime between'" + time.ToString(format) + "'AND'" + time2.ToString(format) + "'", con);
                Device_Id_command.Parameters.AddWithValue("@serial_number", serial_number);

                con.Open();
                SqlDataReader reader = Device_Id_command.ExecuteReader();
                //SqlDataReader reader_events = event_command.ExecuteReader();

                while (reader.Read())
                {
                    energy_kwh.Add(Convert.ToDouble(reader["Energy_kWh"]));
                    power_kw.Add(Convert.ToDouble(reader["Power_kW"]));
                    voltage_1.Add(Convert.ToDouble(reader["Voltage_Phase_1"]));
                    voltage_2.Add(Convert.ToDouble(reader["Voltage_Phase_2"]));
                    voltage_3.Add(Convert.ToDouble(reader["Voltage_Phase_3"]));
                    current_1.Add(Convert.ToDouble(reader["Current_Phase_1"]));
                    current_2.Add(Convert.ToDouble(reader["Current_Phase_2"]));
                    current_3.Add(Convert.ToDouble(reader["Current_Phase_3"]));
                    Meter_datetime.Add(sample_con.ConvertToUnixTimestamp(Convert.ToDateTime(reader["Data_Datetime"])));
                    device_id = Convert.ToInt32(reader["Device_ID"]);
                }
                con.Close();

之后我在ViewData中传递了它们

ViewData["energy_kwh"] = energy_kwh;

Bellow是我的剃刀语法

    var myArrayX_kwh = [];
    var myArrayY_kwh = [];
    var arry_kwh = [];

    @foreach (var st in ViewData["energy_kwh"] as List<double?>)
    {
        @:myArrayY_kwh.push(@st);
    }

     for (var i = 0; i < myArrayX_kwh.length; i++) 
     {
        arry_kwh.push({ x: myArrayX_kwh[i], y: myArrayY_kwh[i], });
     }

    var chart1 = new Highcharts.Chart({

        chart: {
            renderTo: 'container1',
            type: 'column',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',

            resetZoomButton: {
                position: {

                    x: -10,
                    y: 350,

                },

                relativeTo: 'chart'
            }
        },
        scrollbar:{
            enabled: true
        },
        navigator: {
            enabled: true,

            height: 30,

        },

        rangeSelector: {


            buttonTheme: { // styles for the buttons
                fill: 'none',
                stroke: 'none',
                'stroke-width': 0,
                r: 8,
                style: {
                    color: '#039',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                    },
                    select: {
                        fill: '#039',
                        style: {
                            color: 'white'
                        }
                    }

                }
            },
            enabled: true,
            inputBoxWidth: 160,
            inputStyle: {
                color: '#039',
                fontWeight: 'bold'
            },
            labelStyle: {
                color: 'black',
                fontWeight: 'bold'
            },
            buttons: [{
                type: 'minute',
                count: 60 * 6,
                text: '6h'
            }, {
                type: 'day',
                count: 1,
                text: '1d'
            }, {
                type: 'day',
                count: 7,
                text: '7d'
            },
            {
                type: 'day',
                count: 14,
                text: '2w'
            },
            {
                type: 'day',
                count: 21,
                text: '3w'

            },
            {
                type: 'month',
                count: 1,
                text: '1m'
            },
            {
                type: 'all',
                text: 'All'
            }]

        },
        plotOptions: {
            column: {
                turboThreshold: 50000
            }

        },
        title: {
            text: 'Energy vs Date & Time',
            style: {

                fontWeight: 'bold',

            }
        },
        xAxis: {

            type: 'datetime',
            //min: 0,
            //max: 100000

        },

        yAxis:
        {
            scrollbar: {
                enabled: true,
                showFull: false

            },
            alternateGridColor: '#FDFFD5',
            title: {
                text: 'Energy (kWh)',
                style: {
                    fontSize: '12px',

                }
            }


        },

        series:
        [
            {
                name: 'Energy kWh',
                color: 'green',
                data: arry_kwh,
            }

        ],
    });

任何帮助都将受到高度赞赏

Answer 1

好吧，对，所以计算比我的评论稍微复杂一点，因为我没有考虑到需要x值来建立当前基值。

差分数组上x值真正需要的是当前x值加上当前和下一个x值之差的一半。

所以这个：

arry_kwh_diff[i] = {x: arry_kwh[i].x, y:arry_kwh[i+1].y - arry_kwh[i].y};

变为：

arry_kwh_diff[i] = {
  x: arry_kwh[i].x + ((arry_kwh[i+1].x - arry_kwh[i].x) / 2), 
  y: (arry_kwh[i+1].y - arry_kwh[i].y)
};

更新了小提琴：

• http://jsfiddle.net/8fjyLhy1/6/