Highchart 用实时数据在水平条中显示进度百分比？

Question

我想在一个图表上显示不同科目的完成进度，这个进度的数据将从数据库中实时获取。这个进度将以百分比表示，我希望将其绘制为水平条。像这样：

我已经试过了：

    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
            <AxisX Title="Subject Code" IsLabelAutoFit="True" >
            <LabelStyle Angle="-90" Interval="1" />
                <MajorGrid Enabled="false" />
            </AxisX>
            <AxisY Title="Progress %" Interval="10" IsLabelAutoFit="True" >

                <MajorGrid Enabled="false" />
            </AxisY>
        </asp:ChartArea>
    </ChartAreas>

代码隐藏：

     if (!IsPostBack)
        {
            Chart5.Visible = true;
            connection.Open();
            DataTable dt = new DataTable();

            SqlCommand cmd = new SqlCommand("select distinct sub_code from [dbname].[dbo].[xyz]",connection);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);


            foreach (DataRow row in dt.Rows)
            {
                sub_code = row["sub_code"].ToString();
                SqlCommand cmd1 = new SqlCommand("select  checked_percent, unchecked_percent From(select COUNT(*) * 100.0 / (select count(*)from[xyz].[dbo].[xyz] where sub_code = @sub_code) as checked_percent from[dbname].[dbo].[xyz]  where CheckBy is not null and sub_code = @sub_code )checked,(select COUNT(*) * 100.0 / (select count(*)from[dbname].[dbo].[xyz] where sub_code = @sub_code)as unchecked_percent from[dbname].[dbo].[xyz]  where CheckBy is  null and sub_code = @sub_code)unchecked", connection);
                cmd1.Parameters.AddWithValue("@sub_code", sub_code);

                SqlDataAdapter da1 = new SqlDataAdapter(cmd1);
                DataSet ds = new DataSet();
                da1.Fill(ds);

                DataTable ChartData = ds.Tables[0];
                Chart5.DataSource = ChartData;
                Chart5.Series[0].Points.DataBind(ChartData.DefaultView, "sub_code");


                DataPoint dp = new DataPoint(0, Convert.ToDouble(ChartData.Rows[0]["unchecked_percent"]));
                dp.Label = string.Format("unchecked\n{0:0.00}%", ChartData.Rows[0]["unchecked_percent"]);
                Chart5.Series[0].Points.Add(dp);

                dp = new DataPoint(0, Convert.ToDouble(ChartData.Rows[0]["checked_percent"]));
                dp.Label = string.Format("checked\n{0:0.00}%", ChartData.Rows[0]["checked_percent"]);
                Chart5.Series[1].Points.Add(dp);
                connection.Close();


            }

        }

我需要 y 轴来显示 sub_codes 但没有得到。

Answer 1

在 Highcharts 中，我将遵循以下步骤：

创建两个百分比堆叠 bar 系列 (stacking: percent)。第一个将保存实际值（例如 78），第二个将是第一个与 100 之间的差值（例如 22）。
在选项中使用此代码禁用第二个系列的工具提示：tooltip.pointFormat: false
配置 dataLabels 以便它们位于条形的右侧，并且它们显示百分号和数字。
要了解 Highcharts 中的实时更新，请参阅本页的 动态图表 部分的图表：https://www.highcharts.com/demo

API 参考文献：

Answer 2

只需要添加这 1 行代码:

     dp.AxisLabel =sub_code;

Highchart 用实时数据在水平条中显示进度百分比？

Highchart to show progress percentages in horizontal bars with real time data?

asp.net

web-applications

sql-server-2008-r2

highcharts