(四)、读取数据库数据并在HighCharts上显示

    技术2022-05-20  60

    在上一篇简单的静态例子中,大家应该可以看得出,图表里横纵坐标的数据都是静态的几个数据,因此我们只要从数据库读取出我们想要的横纵坐标值,然后动态赋给Chart就行了。

     

     

    X轴:

         xAxis: {                     categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日' ], //X轴的坐标值                     title: {text: '周数'},  //X轴坐标标题                 }

     

    Y轴:

         yAxis: {                     title: {text: '人数(人)'},  //Y轴坐标标题                 }

     

    主标题:

         title: { text: '图表主标题' }, //图表主标题

    副标题:

         subtitle: {text: '图表子标题' }, //图表副标题

     

    Y轴数据:

         series:[{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50] }]

     

     

    这些值我们都可以从数据库获得数据,然后动态绑定上去即可,这里后台代码中最常用的是StringBuilder,通过它来拼凑出要绑定的数据

     

     

    X轴:

         xAxis: {                     categories: <%= XAxisCategories %> , //X轴的坐标值                     title: <%=Xtitle %> ,  //X轴坐标标题                 }

     

    Y轴:

         yAxis: {                     title:<%=Ytitle %> ,  //Y轴坐标标题                 }

     

    主标题:

         title: <%=title %> , //图表主标题

    副标题:

         subtitle: <%=subtitle %> , //图表副标题

     

    Y轴数据:

         series:<%= seriesData.ToString() %>

     

    下面给出获取X轴、Y轴、标题的方法:

     

        public string XAxisCategories = ""; //X轴     public StringBuilder seriesData = new StringBuilder(); //Y轴     public string title = ""; // 图表标题

        ...

      标题获取

     

      title = "{text: '" + "<font color=red>"+site_name +"</font>"+"'}";  //红色标记的部分是从数据库动态获取的,怎么获取,该获取什么,根据你需要,你应该懂的

     

    X轴获取:

     

    StringBuilder xAxisCategories = new StringBuilder();

    xAxisCategories.Append("[");

    ...

    foreach (DataRowView drv in ds.Tables[0].DefaultView)

    {      xAxisCategories.Append("'");      xAxisCategories.Append(drv["周数"] == null ? "0" : drv["周数"].ToString());      xAxisCategories.Append("',");

    }

    XAxisCategories = xAxisCategories.Replace(",", "", xAxisCategories.Length - 1, 1).Append("]").ToString(); //这里是去掉最后一个多余的逗号(,)

     

    Y轴获取:

     

    StringBuilder yAxisCategories = new StringBuilder();

    ...

    foreach (DataRowView drv in ds.Tables[0].DefaultView)

    {      yAxisCategories.Append(drv["人数"] == null ? "0" : drv["人数"].ToString());      yAxisCategories.Append(",");

    }

    seriesData.Append("[{name: '人数',type: 'spline',data: ["); seriesData.Append(yAxisCategories.Replace(",", "", yAxisCategories.Length - 1, 1)); //去除最后一个逗号(,) seriesData.Append("]}]");

     

     

     

     

     

     

     

     

     

     

     

     


    最新回复(0)