高图表多系列绑定

本文关键字:绑定 系列 高图表 | 更新日期: 2023-09-27 18:36:11

我已经为单个系列开发了高图表图形,但无法绑定多个序列。

我的要求如下

我有复选框列表,包含如下内容,当用户选择多个复选框并单击加载按钮时,高图表将显示他选择的内容。

A型

B型

C型

D型........Z 型

我只能完成一个复选框,但我不确定如何为多个选择编码并在高图表中显示。

我是高图表的新手,任何帮助都将不胜感激。

我的Javascript代码:

<script type="text/javascript">
    $(function () {
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'spline',
                zoomType: 'x',
                spacingRight: 50
            },
            title: {
                text: 'Sample Spline Chart',
                x: -20 //center
            },
            subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Pinch the chart to zoom in',
                 x: -20
             },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                day: '%e %b %y',
                minute: '%l%M<br>%p'
               }
            },
            yAxis: {
                title: {
                text: 'Values'
                },
             min: 0
            },
            series: [{
                name: 'Value',
                data: <%= chartData1%>

           }]
        });
    });

</script>

C# 代码:

protected void btnLoad_Click(object sender, EventArgs e)
{
    selectedLists.Clear();
    foreach (ListItem item in chkboxTypes.Items)
    {
        if (item.Selected == true)
        {
            var selected = item.Text.Split(',');
            selectedLists.Add(selected[0]);
        }
    }
    foreach (var item in selectedLists)
    {
        typeID = item;
        var fromdate = fromdatepicker.Value;
        var todate = todatepicker.Value;
        var dsSql = string.Format(@"SELECT START_DATETIME, VALUE FROM XXXXX WHERE  TYPE_ID = '{0}' AND START_DATETIME >= '{1} 00:00' AND END_DATETIME <= '{2} 23:59' ORDER BY START_DATETIME ASC", typeID, fromdate, todate);
        var database = new Database(dbstring, "System.Data.SqlClient");
        database.CommandTimeout = 3600;
        var dataSourcesAttributes = database.Fetch<DataPoint>(dsSql);

        var chkboxData = string.Empty;
        if (dataSourcesAttributes.Count > 0)
        {
            foreach (var data in dataSourcesAttributes)
            {
                listDimensionalValues.Add(Tuple.Create(data.AppliesToDateTime, data.Value));
                JavaScriptSerializer serializeData = new JavaScriptSerializer();
                var Validdata = serializeData.Serialize(listDimensionalValues.ToArray());
                chkboxData = Properdata(Validdata);
            }
            chartData1 = chkboxData;
        }
        else
        {
            lblError.Visible = true;
            lblError.Text = databasevalue + " There is no data available for this Type or please select different dates";
        }
    }
}

图表数据 1 字符串

 public string chartData1 { get; set; }

请提供任何建议或帮助伙伴

高图表多系列绑定

这可以通过两种方式完成。

1.首先加载所有系列,然后使用

chart.series[index].hide();

当用户选中复选框时,使用

chart.series[index].show();

仅当所有系列的数据都可用时,才能执行此操作。

显示/隐藏 http://jsfiddle.net/JACDP/的小提琴示例

2.动态添加或删除系列。

首先使用默认序列加载图表。

当用户选中新复选框时,

使用
chart.addSeries({
name: ,
data: [],
})

添加系列的示例:http://jsfiddle.net/9JzLN/未经检查使用时

chart.series[index].remove();

删除系列 http://jsfiddle.net/ArkxY/的示例

希望这对你有帮助。