高图表多系列绑定
本文关键字:绑定 系列 高图表 | 更新日期: 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/的示例
希望这对你有帮助。