文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >高图活多系列

问高图活多系列
EN

Stack Overflow用户
提问于 2013-12-12 05:11:02
回答 2查看 4.4K关注 0票数 0

我正试图同时在高图表上显示10个系列。下面的代码。

代码语言：javascript
复制
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: []

        }]

    });
});

该系列的传奇正在图表上出现，但它并没有显示数据。

javascript
highcharts
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-12-12 11:51:09

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

JavaScript

代码语言：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: []

        }]

    });
});

服务器端代码(C#)

代码语言：javascript
复制
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)代码

代码语言：javascript
复制
<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>
票数 0
EN

Stack Overflow用户

发布于 2013-12-12 09:39:21

我建议将其替换为：

代码语言：javascript
复制
 chart.series[0].addPoint([0, 1], true, true);
 //other points as first
 chart.series[9].addPoint([0, 10], true, true);

使用

代码语言：javascript
复制
 chart.series[0].addPoint([0, 1], false, true);
 //other points as first
 chart.series[9].addPoint([0, 10], true, true);

不能动态地将点添加到空图表中，但是您可以对数据设置空值，比如这里的http://jsfiddle.net/g2tka/1/或使用addSeries。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/20535536

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档