HighCharts Multiseries binding

我已經爲單個系列開發了高圖表圖形，但無法綁定多個系列。HighCharts Multiseries binding

我的要求是類似如下

我已經複選框列表如下包含當用戶選擇多個複選框並單擊Load按鈕高圖表將顯示以往他選擇了什麼。

TYPE A

TYPE B

C型

TYPE 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; }

請任何建議或幫助隊友

來源

2013-10-21 user1990395

在多個串聯它應該是系列：[{ 名： '值'，數據：<％= chartData1％> }，{ 名： '值2'，數據：<％= chartData2％> }] –

@SebastianBochan感謝您的回覆。想象一下，如果我有10個名字和10個chartdata2，所以我不能像這樣添加對嗎？我的意思是它不是一個好主意，像這樣的隊友添加..有什麼其他方式可以綁定？ – user1990395

@SebastianBochan任何建議隊友 – user1990395

這可以完成兩種方式秒。

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/

希望這會幫助你。

來源

2013-10-22 08:05:12 Strikers

感謝您的回覆。我會嘗試這個伴侶。有人昨天剛剛用json對象創建了數組。 – user1990395

HighCharts Multiseries binding

回答

相關問題