Highchart zum Anzeigen von Fortschrittsprozentsätzen in horizontalen Balken mit Echtzeitdaten?

Question

Ich möchte den Fortschritt der Fertigstellung von verschiedenen Themen in einem einzigen Diagramm anzeigen, wo die Daten dieses Fortschritts in Echtzeit aus der Datenbank abgerufen werden. Dieser Fortschritt würde in Prozent ausgedrückt werden und ich möchte es als horizontale Balken gezeichnet werden. so etwas wie dieses:

Ich habe versucht, dies:

<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> 

Code-Behind:

 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(); 


      } 

     } 

Ich brauche die y-Achse die sub_codes angezeigt werden, aber nicht immer, dass .

Answer 1

müssen Sie einfach diesen 1 Codezeile hinzuzufügen:

 dp.AxisLabel =sub_code; 

Answer 2

In Highcharts würde ich folgendermaßen vor:

• Erstellen Sie zwei Prozent bar Serie (stacking: percent) gestapelt. Der erste wird den tatsächlichen Wert (z. B. 78) enthalten und der zweite wird die Differenz zwischen dem ersten Wert und 100 (z. B. 22) sein.
• Disable Tooltip für die zweite Reihe dieses Code in Optionen: tooltip.pointFormat: false
• konfiguriert dataLabels so dass Haus genauso geschaffen auf der rechten Seite der Stäbe und sie zeigen das Prozentzeichen mit der Zahl.
• Um Live-Aktualisierung zu verstehen in Highcharts die Charts von Dynamische Diagramme Abschnitt dieser Seite sehen: https://www.highcharts.com/demo

API-Referenzen:

• https://api.highcharts.com/highcharts/plotOptions.series.stacking

• https://api.highcharts.com/highcharts/series.bar.dataLabels

• https://api.highcharts.com/highcharts/series.bar.tooltip.pointFormat