Highchart / Highstock数据采样

Question

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

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

我将在短期内解释第2点，请参阅波纹管图像以获得视觉理解

红线是两点之间的差异（如第1点所述）

该图表是energy_kwh

对于第2点，请参考以下示例

例如，存在具有值5，7，9 3分，并且它们与相应的时间，即3个时间范围可能绘制14:00 15:00和16:00，但如果我采取有差异等7 - 5 = 2和9 - 7 = 2然后我有2个值/点，但时间仍然是3 ，我想绘制时间范围之间的新点，如从下午2点到下午3点 ，点是2，所以它将显示在时间之间。

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

贝娄是我的控制器代码

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;

贝娄是我的剃刀语法

    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/