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中，我会按照以下步骤操作：

创建两个百分比堆叠栏系列（stacking: percent）。第一个将保持实际值（例如78），第二个将保持第一个和100之间的差异（例如22）。
在选项tooltip.pointFormat: false
配置dataLabels以便在条形图的右侧显示，并显示百分号和数字。
要了解Highcharts中的实时更新，请参阅本页 动态图表 部分中的图表：https://www.highcharts.com/demo

API参考：

Answer 2

只需添加以下1行代码：

     dp.AxisLabel =sub_code;

使用实时数据显示水平条中进度百分比的高图？

2 个答案: