现场与高图的多个系列 [英] Live multiple series with highchart

查看：78
本文介绍了现场与高图的多个系列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在highcharts上同时显示10个系列。使用以下代码。

 函数requestData（）{
 $ .ajax（{
 url：' Default3.aspx'，
 dataType：'json'，
 error：function（point）{
 var series = chart.series [10]，
 
 shift = series.data.length> 50; //如果该系列长度超过20，则转换
 
 
 chart.series [0] .addPoint（[0，1]，true，true） ; 
 chart.series [1] .addPoint（[0，2]，true，true）; 
 chart.series [2] .addPoint（[0，3]，true，true）; 
 chart.series [3] .addPoint（[0,4]，true，true）; 
 chart.series [4] .addPoint（[0，5]，true，true）; 
 chart.series [5] .addPoint（[0，6]，true，true）; 
 chart.series [6] .addPoint（[0，7]，true，true）; 
图表.series [7] .addPoint（[0，8]，true，true）; 
 chart.series [8] .addPoint（[0，9]，true，true）; 
 chart.series [9] .addPoint（[0，10]，true，true ）; 
 
 
 //在一秒钟后再次调用
 setTimeout（requestData，5000）; 
}，
成功：函数（点）{
 var series = chart.series [10]，
 shift = series.data.length> 50; //如果系列长度超过20，则移位
 
 //添加点
 // chart.series [0] .addPoint（eval（point），true，shift）; 
 chart.series [0] .addPoint（[0，1]，true，true）; 
 chart.series [1] .addPoint（[0，2]，true，true）; 
 chart.series [2] .addPoint（[0，3]，true，true）; 
 chart.series [3] .addPoint（[0，4]，true，true）; 
 chart.series [4] .addPoint（[0，5]，true，true）; 
 chart.series [5] .addPoint（[0，6]，true，true）; 
 chart.series [6] .addPoint（[0，7]，true，true）; 
 chart.series [7] .addPoint（[0，8]，true，true）; 
 chart.series [8] .addPoint（[0，9]，true，true）; 
 chart.series [9] .addPoint（[0，10]，true，true）; 
 
 
 //在一秒钟后再次调用
 setTimeout（requestData，5000）; 
}，
 cache：false 
}）; 
 
 $ b $（document）.ready（function（）{
 chart = new Highcharts.Chart（{
 chart：{
 renderTo：' '
 defaultSeriesType：'line'，
 events：{
 load：requestData 
} 
}，
 title：{
 text ：'传感器数据与时间'
}，
 xAxis：{
类型：'datetime'，
 tickPixelInterval：150，
 maxZoom：20 * 1000 
 $ b yAxis：{
 minPadding：0.2，
 maxPadding：0.2，
 title：{
 text：'Value'，
 margin： 80 
} 
}，
 
系列：[{
 
数据：[] 
}，{
数据：[ ] 
}，{
 data：[] 
}，{
 data：[] 
}，{
 da ta：[] 
}，{
 data：[] 
}，{
 data：[] 
}，{
 data：[] 
}，{
 data：[] 
}，{
 data：[] 
 
}] 
 
}）; 
}）;

该系列的传说即将出现在图表上，但不会显示数据。

解决方案

我在试验和错误的基础上做了一些修改，并得到它的工作，实际上我必须使用 eval 函数，我以前没有使用。
这里是答案

JavaScript 

 < $ c $函数requestData（）{
 $ .ajax（{
 url：'Default3.aspx'，
 dataType：'json'，
 error：function（point ）{
 var series = chart.series [0]，
 
 shift = series.data.length> 50; //如果该系列长于20 
 
 
 var values = eval（point）; 
 chart.series [0] .addPoint（[values [0]，values [1]]，true，shift）; 
图表.series [1] .addPoint（[values [0]，values [2]]，true，shift）; 
 chart.series [2] .addPoint（[values [0]，values [3]]， true，shift）; 
 chart.series [3] .addPoint（[values [0]，values [4]]，true，shift）; 
 chart.series [4] .addPoint（[values [0]，values [5]]，true，shift）; 
 chart.series [5] .addPoint（[values [0]，values [6]]，true，shift）; 
图表.series [6] .addPoint（[values [0]，values [ 7]]，true，shift）; 
 chart.series [7] .addPoint（[values [0]，values [8]]，true，shift）; 
 chart.series [8] .addPoint（[values [0]，values [9]]，true，shift）; 
 chart.series [9] .addPoint（[values [0]，values [10]]，true，shift）; 
 
 //定义秒后再次调用
 setTimeout（requestData，5000）; 
}，
成功：函数（点）{
 var series = chart.series [0]，
 shift = series.data.length> 50; //如果系列长度超过20，则移位
 
 //添加点
 // chart.series [0] .addPoint（eval（point），true，shift）; 
 var values = eval（point）; 
 chart.series [0] .addPoint（[values [0]，values [1]]，true，shift）; 
 chart.series [1] .addPoint（[values [0]，values [2]]，true，shift）; 
 chart.series [2] .addPoint（[values [0]，values [3]]，true，shift）; 
 chart.series [3] .addPoint（[values [0]，values [4]]，true，shift）; 
 chart.series [4] .addPoint（[values [0]，values [5]]，true，shift）; 
 chart.series [5] .addPoint（[values [0]，values [6]]，true，shift）; 
 chart.series [6] .addPoint（[values [0]，values [7]]，true，shift）; 
 chart.series [7] .addPoint（[values [0]，values [8]]，true，shift）; 
 chart.series [8] .addPoint（[values [0]，values [9]]，true，shift）; 
 chart.series [9] .addPoint（[values [0]，values [10]]，true，shift）; 
 
 
 //定义秒后再次调用
 setTimeout（requestData，5000）; 
}，
 cache：false 
}）; 
 
 $ b $（document）.ready（function（）{
 chart = new Highcharts.Chart（{
 chart：{
 renderTo：'容器'，
 defaultSeriesType：'spline'，
 events：{
 load：requestData 
} 
}，
 title：{
 text ：'传感器数据与时间'
}，
 xAxis：{
类型：'datetime'，
 tickPixelInterval：150，
 maxZoom：20 * 1000 
 $ b yAxis：{
 minPadding：0.2，
 maxPadding：0.2，
 title：{
 text：'Value'，
 margin： 80 
} 
}，
 
系列：[{
 name：'Pressure 1（PSI）'，
 data：[] 
 }，{
 name：'Flow 1（GPM）'，
 data：[] 
}，{
 name ：'温度1（C）'，
数据：[] 
}，{
名称：'速度1（RPM）'，
数据：[] 
 }，{
 name：'Power 1（kW）'，
 data：[] 
}，{
 name：'Pressure 2（PSI）'，
数据：[] 
}，{
 name：'Flow 2（GPM）'，
 data：[] 
}，{
 name：'Temperature 2 C）'，
 data：[] 
}，{
 name：'Speed 2（RPM）'，
 data：[] 
}，{
名称：'Power 2（kW）'，
 data：[] 
 
}] 
 
}）; 
}）;

服务器端代码（C＃） 

  public partial class Default3：System.Web.UI.Page 
 {
 
 
 
 public DataTable dt = new DataTable（）; 
公共字符串DATA; 
列表< string> hidXCategories11 =新列表< string>（）; 
 
公共字符串chartData 
 {
 get; 
 set; 
 
 $ b protected void Page_Load（object sender，EventArgs e）
 {
 
 
 GetData（）; 
 var epoch = new DateTime（1970，1，1，0，0，0，DateTimeKind.Utc）; 
 var timeDiff = DateTime.Now  -  new DateTime（1970，1，1）; 
 var totaltime = timeDiff.TotalMilliseconds; 
列表< double> _data = new List< double>（）; 
 foreach（dt.Rows中的DataRow行）
 {
 _data.Add（totaltime）; 
 _data.Add（（double）Convert.ToDouble（row [S11]））; $（b）_data.Add（（double）Convert.ToDouble（row [S12]））; 
 _data.Add（（double）Convert.ToDouble（row [S13]））; 
 _data.Add（（double）Convert.ToDouble（row [S14]））; 
 _data.Add（（double）Convert.ToDouble（row [S15]））; 
 _data.Add（（double）Convert.ToDouble（row [S21]））; 
 _data.Add（（double）Convert.ToDouble（row [S22]））; 
 _data.Add（（double）Convert.ToDouble（row [S23]））; 
 _data.Add（（double）Convert.ToDouble（row [S24]））; 
 _data.Add（（double）Convert.ToDouble（row [S25]））; 
} 
 
 JavaScriptSerializer jss = new JavaScriptSerializer（）; 
 chartData = jss.Serialize（_data）; 
 Response.Write（chartData）; 
 
 
 
 $ b private void GetData（）
 {
 StringBuilder str = new StringBuilder（）; 
 SqlConnection con = new SqlConnection（Data Source = localhost \\SQLEXPRESS; Initial Catalog = MyData; Integrated Security = SSPI）; 
 SqlDataAdapter adp = new SqlDataAdapter（通过Id desc从MyTable命令中选择top 1 *，con）; 
 
 adp.Fill（dt）; 
 
 
 
 
 $ b

HTML（.aspx）Code 

 < script src =JavaScript / highcharts.js >< /脚本> 
< script src =JavaScript / exporting.js>< / script> 
 
< div id =containerstyle =min-width：280px; height：400px; margin：0 auto>< / div>


I am trying to display 10 series simultaneously on highcharts. With the following code.

function requestData() {
    $.ajax({
        url: 'Default3.aspx',
        dataType: 'json',
        error: function (point) {
            var series = chart.series[10],

                shift = series.data.length > 50; // shift if the series is longer than 20


            chart.series[0].addPoint([0, 1], true, true);
            chart.series[1].addPoint([0, 2], true, true);
            chart.series[2].addPoint([0, 3], true, true);
            chart.series[3].addPoint([0, 4], true, true);
            chart.series[4].addPoint([0, 5], true, true);
            chart.series[5].addPoint([0, 6], true, true);
            chart.series[6].addPoint([0, 7], true, true);
            chart.series[7].addPoint([0, 8], true, true);
            chart.series[8].addPoint([0, 9], true, true);
            chart.series[9].addPoint([0, 10], true, true);


            // call it again after one second
            setTimeout(requestData, 5000);
        },
        success: function (point) {
            var series = chart.series[10],
                shift = series.data.length > 50; // shift if the series is longer than 20

            // add the point
           // chart.series[0].addPoint(eval(point), true, shift);
            chart.series[0].addPoint([0, 1], true, true);
            chart.series[1].addPoint([0, 2], true, true);
            chart.series[2].addPoint([0, 3], true, true);
            chart.series[3].addPoint([0, 4], true, true);
            chart.series[4].addPoint([0, 5], true, true);
            chart.series[5].addPoint([0, 6], true, true);
            chart.series[6].addPoint([0, 7], true, true);
            chart.series[7].addPoint([0, 8], true, true);
            chart.series[8].addPoint([0, 9], true, true);
            chart.series[9].addPoint([0, 10], true, true);


            // call it again after one second
            setTimeout(requestData, 5000);
        },
        cache: false
    });
}

$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'line',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Sensor Data Vs. Time'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },

        series: [{

            data: []
        },{
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []
        }, {
            data: []

        }]

    });
});

Legends of the series is coming on the chart but it is not displaying the data.

解决方案

I did some modification on trial and error basis and got it working, Actually i have to use eval function which I was not using previously. Here is the answer

JavaScript

function requestData() {
    $.ajax({
        url: 'Default3.aspx',
        dataType: 'json',
        error: function (point) {
            var series = chart.series[0],

                shift = series.data.length > 50; // shift if the series is longer than 20


            var values = eval(point);
            chart.series[0].addPoint([values[0], values[1]], true, shift);
            chart.series[1].addPoint([values[0], values[2]], true, shift);
            chart.series[2].addPoint([values[0], values[3]], true, shift);
            chart.series[3].addPoint([values[0], values[4]], true, shift);
            chart.series[4].addPoint([values[0], values[5]], true, shift);
            chart.series[5].addPoint([values[0], values[6]], true, shift);
            chart.series[6].addPoint([values[0], values[7]], true, shift);
            chart.series[7].addPoint([values[0], values[8]], true, shift);
            chart.series[8].addPoint([values[0], values[9]], true, shift);
            chart.series[9].addPoint([values[0], values[10]], true, shift);

            // call it again after defined seconds
            setTimeout(requestData, 5000);
        },
        success: function (point) {
            var series = chart.series[0],
                shift = series.data.length > 50; // shift if the series is longer than 20

            // add the point
           // chart.series[0].addPoint(eval(point), true, shift);
            var values = eval(point);
            chart.series[0].addPoint([values[0], values[1]], true, shift);
            chart.series[1].addPoint([values[0], values[2]], true, shift);
            chart.series[2].addPoint([values[0], values[3]], true, shift);
            chart.series[3].addPoint([values[0], values[4]], true, shift);
            chart.series[4].addPoint([values[0], values[5]], true, shift);
            chart.series[5].addPoint([values[0], values[6]], true, shift);
            chart.series[6].addPoint([values[0], values[7]], true, shift);
            chart.series[7].addPoint([values[0], values[8]], true, shift);
            chart.series[8].addPoint([values[0], values[9]], true, shift);
            chart.series[9].addPoint([values[0], values[10]], true, shift);


            // call it again after defined seconds
            setTimeout(requestData, 5000);
        },
        cache: false
    });
}

$(document).ready(function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
        title: {
            text: 'Sensor Data Vs. Time'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },

        series: [{
           name: 'Pressure 1 (PSI)',
            data: []
        }, {
            name: 'Flow 1 (GPM)',
            data: []
        }, {
            name:'Temperature 1 (C)',
            data: []
        }, {
            name: 'Speed 1 (RPM)',
            data: []
        }, {
            name: 'Power 1 (kW)',
            data: []
        }, {
            name:'Pressure 2 (PSI)',
            data: []
        }, {
            name:'Flow 2 (GPM)',
            data: []
        }, {
            name:'Temperature 2 (C)',
            data: []
        }, {
            name: 'Speed 2 (RPM)',
            data: []
        }, {
            name: 'Power 2 (kW)',
            data: []

        }]

    });
});

Server Side Code (C#)

public partial class Default3 : System.Web.UI.Page
{



    public DataTable dt = new DataTable();
    public string DATA;
    List<string> hidXCategories11 = new List<string>();

    public string chartData
    {
        get;
        set;

    }
    protected void Page_Load(object sender, EventArgs e)
    {


        GetData();
        var epoch = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
        var timeDiff = DateTime.Now - new DateTime(1970, 1, 1);
        var totaltime = timeDiff.TotalMilliseconds;
        List<double> _data = new List<double>();
        foreach (DataRow row in dt.Rows)
        {
            _data.Add(totaltime);
            _data.Add((double)Convert.ToDouble(row["S11"]));
            _data.Add((double)Convert.ToDouble(row["S12"]));
            _data.Add((double)Convert.ToDouble(row["S13"]));
            _data.Add((double)Convert.ToDouble(row["S14"]));
            _data.Add((double)Convert.ToDouble(row["S15"]));
            _data.Add((double)Convert.ToDouble(row["S21"]));
            _data.Add((double)Convert.ToDouble(row["S22"]));
            _data.Add((double)Convert.ToDouble(row["S23"]));
            _data.Add((double)Convert.ToDouble(row["S24"]));
            _data.Add((double)Convert.ToDouble(row["S25"]));
        }

        JavaScriptSerializer jss = new JavaScriptSerializer();
        chartData = jss.Serialize(_data);
        Response.Write(chartData);

    }


        private void GetData()
        {
            StringBuilder str = new StringBuilder();
            SqlConnection con = new SqlConnection("Data Source=localhost\\SQLEXPRESS;Initial Catalog=MyData;Integrated Security=SSPI");
            SqlDataAdapter adp = new SqlDataAdapter("select top 1 * from MyTable order by Id desc ", con);

            adp.Fill(dt);


        }

    }

HTML (.aspx) Code

<script src="JavaScript/highcharts.js"></script>
<script src="JavaScript/exporting.js"></script>

<div id="container" style="min-width: 280px; height: 400px; margin: 0 auto"></div>

这篇关于现场与高图的多个系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆