2017-07-11 15 views
1

私はこのようなチャート作成しようとしています:X軸の適切な間隔でASP.NET縦棒グラフの列を広げる方法は?

enter image description here

を私はほとんど存在していますが、私は列ではなく、彼らは私のチャートの最初の範囲に渡って集中して、それぞれの範囲に広がっていないとの問題を抱えています。これを解決するには?

は、私が試した:コードビハインドから

<asp:Chart ID="Chart2" runat="server" BackColor="DarkSlateBlue" BackGradientStyle="LeftRight" 
      BorderlineWidth="0" Height="440px" Palette="SeaGreen" PaletteCustomColors="24, 0, 0" 
      Width="560px" BorderlineColor="128, 128, 255" OnLoad="Chart2_Load"> 

    <Titles> 
     <asp:Title Name="DefaultTitle" Font="Trebuchet MS, 15pt, style=Bold" 
        Text = "Students per Total Score Achieved" /> 
    </Titles> 
    <%-- <Legends> 
      <asp:Legend Name="DefaultLegend" Enabled="True" Docking="Top" /> 
    </Legends>--%> 

    <Series> 
     <asp:Series Name="Series1" IsValueShownAsLabel="true" YValuesPerPoint="1"></asp:Series> 
    </Series> 
    <ChartAreas> 
     <asp:ChartArea Name="ChartArea1" > 
      <AxisY Title="No of Students " Interval="5"></AxisY> 
      <AxisX Title="Score Achieved" Minimum="0" IntervalAutoMode="FixedCount" Interval="100" IntervalType="Number"> 
       <LabelStyle Angle="-90" Interval="10" IntervalType="Number" /> 
      </AxisX> 
     </asp:ChartArea> 
    </ChartAreas> 
</asp:Chart> 

エキス:ASPXから

エキス

protected void DropDown_Subjects_SelectedIndexChanged(object sender, EventArgs e) 
{ 
    Chart2.Visible = true; 

    SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString); 

    SqlCommand cmd = new SqlCommand(); 
    cmd.Connection = connection; 
    cmd.CommandType = CommandType.StoredProcedure; 
    cmd.CommandText = "sp_range"; 
    cmd.Parameters.AddWithValue("@sub_code", DropDown_Subjects.SelectedItem.Value); 

    // cmd.ExecuteNonQuery(); 

    connection.Open(); 
    SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection); 
    Chart2.DataSource = dr; 

    Chart2.Series[0].XValueMember = "Score_Acheived"; 
    Chart2.Series[0].YValueMembers = "No_of_Students"; 

    Chart2.DataBind(); 
    connection.Close();   
} 


protected void Chart2_Load(object sender, EventArgs e) 
{   
} 

そして、私のグラフは次のようになります。

enter image description here

答えて

1

元のASPXを修正して、希望の結果に合わせてください。基本的には、主要なグリッド間隔をスコア範囲と同じにし、各範囲の中点をそれぞれXValueにする必要があります。また、列が完全にギャップを埋めるようにするには、カスタムプロパティPointWidth=1を設定する必要があります。

enter image description here

ASPX:

 <asp:Chart ID="Chart2" runat="server" BackColor="DarkSlateBlue" BackGradientStyle="LeftRight" 
     BorderlineWidth="0" Height="440px" Palette="SeaGreen" PaletteCustomColors="24, 0, 0" 
     Width="560px" BorderlineColor="128, 128, 255" OnLoad="Chart2_Load"> 

      <Titles> 
       <asp:Title Name="DefaultTitle" Font="Trebuchet MS, 15pt, style=Bold" 
          Text = "Students per Total Score Achieved" /> 
      </Titles> 
      <%-- <Legends> 
        <asp:Legend Name="DefaultLegend" Enabled="True" Docking="Top" /> 
      </Legends>--%> 

      <Series> 
       <asp:Series Name="Series1" YValuesPerPoint="1" CustomProperties="PointWidth=1"> 
        <Points> 
         <asp:DataPoint Color="GreenYellow" XValue="15" YValues="25" /> 
         <asp:DataPoint Color="255, 255, 128" XValue="25" YValues="15" /> 
         <asp:DataPoint Color="0, 192, 192" XValue="35" YValues="10" /> 
         <asp:DataPoint Color="Khaki" XValue="45" YValues="35" /> 
        </Points> 
       </asp:Series> 
      </Series> 
      <ChartAreas> 
       <asp:ChartArea Name="ChartArea1" > 
        <AxisY Title="No of Students "> 
         <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" /> 
        </AxisY> 
        <AxisX Title="Score Achieved" Minimum="0" Enabled="True"> 
         <MajorGrid Interval="10" IntervalOffset="Auto" IntervalOffsetType="Number" IntervalType="Number" LineColor="DarkGray" LineDashStyle="Dot" /> 
         <MajorTickMark Interval="10" IntervalOffset="Auto" IntervalOffsetType="Number" IntervalType="Number" /> 
        </AxisX> 
        <AxisY2> 
         <LabelStyle TruncatedLabels="True" /> 
        </AxisY2> 
       </asp:ChartArea> 
      </ChartAreas> 
     </asp:Chart> 

EDIT:注意各ポイントの色を明示的にASPXファイルに割り当てられていること。あなたは、コレクションから事前に定義された色を使用して、コードビハインドで同じことを行うか、ランダムな色を生成し、このようにすることができます

Random r = new Random(); 
foreach (DataPoint dp in Chart2.Series[0].Points) 
    dp.Color = Color.FromArgb(255, r.Next(100, 255), r.Next(100, 255), r.Next(100, 255)); 

EDIT 2:これは私のコードは次のようになります正確に何であります今:

ASPX:

<asp:Chart ID="Chart2" runat="server" BackColor="DarkSlateBlue" BackGradientStyle="LeftRight" 
    BorderlineWidth="0" Height="440px" Palette="SeaGreen" PaletteCustomColors="24, 0, 0" 
    Width="560px" BorderlineColor="128, 128, 255" OnLoad="Chart2_Load"> 

     <Titles> 
      <asp:Title Name="DefaultTitle" Font="Trebuchet MS, 15pt, style=Bold" 
         Text = "Students per Total Score Achieved" /> 
     </Titles> 
     <%-- <Legends> 
       <asp:Legend Name="DefaultLegend" Enabled="True" Docking="Top" /> 
     </Legends>--%> 

     <Series> 
      <asp:Series Name="Series1" YValuesPerPoint="1" CustomProperties="PointWidth=1"> 
      </asp:Series> 
     </Series> 
     <ChartAreas> 
      <asp:ChartArea Name="ChartArea1" > 
       <AxisY Title="No of Students "> 
        <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" /> 
       </AxisY> 
       <AxisX Title="Score Achieved" Minimum="0" Enabled="True"> 
        <MajorGrid Interval="10" IntervalOffset="Auto" IntervalOffsetType="Number" IntervalType="Number" LineColor="DarkGray" LineDashStyle="Dot" /> 
        <MajorTickMark Interval="10" IntervalOffset="Auto" IntervalOffsetType="Number" IntervalType="Number" /> 
       </AxisX> 
       <AxisY2> 
        <LabelStyle TruncatedLabels="True" /> 
       </AxisY2> 
      </asp:ChartArea> 
     </ChartAreas> 
    </asp:Chart> 

CS:

protected void Chart2_Load(object sender, EventArgs e) 
{ 
    Chart2.Visible = true; 
    /* 
    SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString); 

    SqlCommand cmd = new SqlCommand(); 
    cmd.Connection = connection; 
    cmd.CommandType = CommandType.StoredProcedure; 
    cmd.CommandText = "sp_range"; 
    cmd.Parameters.AddWithValue("@sub_code", DropDown_Subjects.SelectedItem.Value); 

    // cmd.ExecuteNonQuery(); 

    connection.Open(); 
    SqlDataReader dr = cmd.ExecuteReader(CommandBehavior.CloseConnection); 
    */ 

    Chart2.DataSource = dt; 

    Chart2.Series[0].XValueMember = "Score_Achieved"; 
    Chart2.Series[0].YValueMembers = "No_of_Students"; 

    Chart2.DataBind(); 

    Random r = new Random(); 
    foreach (DataPoint dp in Chart2.Series[0].Points) 
     dp.Color = Color.FromArgb(255, r.Next(100, 255), r.Next(100, 255), r.Next(100, 255)); 

    //connection.Close(); 
} 

enter image description here

+0

その面グラフとしてマージする単一色を使用して –

+0

私を参照してください...期待通りにチャートが作成されているが、唯一の問題は、列が異なる色を取っていないということです**編集**。 – jsanalytics

+0

まだ動作していません:/ –

関連する問題