HighCharts 多系列绑定

Question

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

我的要求如下

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

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";

        }
    }

}

ChartData 1 字符串

 public string chartData1 { get; set; }

请任何建议或帮助队友

Answer 1

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

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/

希望这会对你有所帮助。