如何在 ASP.NET 图表中绘制位移条

Question

我正在使用 System.Web.UI.DataVisualization.Charting.Chart 并尝试绘制移位的条，但不是这样：另一种方式：

我的意思是，我想从点 1 开始绘制条形图并向右移动 55px。

我已经做到了：

使用以下代码：

Chart1.Series.Clear();

    int[,] horas = new int[,] { { 0, 1 }, { 1, 1 }, { 2, 0 }, { 3, 1 }, { 4, 0 }, { 5, 1 }, { 6, 0 }, { 7, 0 }, { 8, 1 }, { 9, 1 } };
    Chart1.DataSource = horas;
    var series1 = new Series
    {
        Color = System.Drawing.Color.Green,
        IsVisibleInLegend = false,
        IsXValueIndexed = true,
        ChartType = SeriesChartType.RangeColumn,
    };
    series1["PixelPointWidth"] = "1";

    int[,] horas1 = new int[,] { { 0, 1 }, { 1, 1 }, { 2, 0 }, { 3, 1 }, { 4, 0 }, { 5, 1 }, { 6, 0 }, { 7, 0 }, { 8, 1 }, { 9, 1 } };
    var series2 = new Series
    {
        Color = System.Drawing.Color.Green,
        IsVisibleInLegend = false,
        IsXValueIndexed = true,
        ChartType = SeriesChartType.RangeColumn
    };
    series2["PixelPointWidth"] = "110";

    for (int i = 0; i < horas.GetLength(0); i++)
    {
        series1.Points.AddXY(horas[i, 0], horas[i, 1]);
    }
    for (int i = 0; i < horas.GetLength(0); i++)
    {
        series2.Points.AddXY(horas1[i, 0], horas1[i, 1]);
    }

    int b = 0;
    foreach (var label in Chart1.ChartAreas[0].AxisX.CustomLabels)
    {
        label.Text = b.ToString();
        b++;
    }

    Chart1.Series.Add(series1);
    Chart1.Series.Add(series2);

    Chart1.ChartAreas[0].AxisY.Interval = 0;
    Chart1.ChartAreas[0].AxisX.Interval = 1;
    Chart1.ChartAreas[0].AxisY.Maximum = 1;
    Chart1.ChartAreas[0].AxisY.Minimum = 0;

    Chart1.ChartAreas[0].AxisX.MajorGrid.LineWidth = 0;
    Chart1.ChartAreas[0].AxisY.MajorGrid.LineWidth = 0;
    Chart1.DataBind();

但这不是最佳解决方案，因为我必须在不需要的一侧绘制至少 1 个像素。

对于如何实现我的目标的任何解决方案或建议，我将不胜感激。提前致谢。

编辑。这是在使用 NET 4.5 框架中的 VS 2015 Professional

开发的 IIS 6.0 下的 Windows Server 2012 中工作的

编辑：我的意思是向右 55 像素，但最好的解决方案是到 X 轴上的下一个点

编辑：这是web.config的内容。

    <configuration>
  <appSettings>
    <add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:\TempImageFiles\;" />
  </appSettings>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <remove name="ChartImageHandler" />
      <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD,POST"
        path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
    </handlers>
  </system.webServer>
  <system.web>
    <httpHandlers>
      <add path="ChartImg.axd" verb="GET,HEAD,POST" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        validate="false" />
    </httpHandlers>
    <pages>
      <controls>
        <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting"
          assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
      </controls>
    </pages>
    <compilation debug="true" targetFramework="4.5">
      <assemblies>
        <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>
    </compilation>
    <httpRuntime targetFramework="4.5"/>
  </system.web>
</configuration>

Answer 1

我的建议是使用 Graph/Chart 库作为：

Google (https://developers.google.com/chart/)
FusionCharts (https://www.fusioncharts.com/)
Chartjs (http://www.chartjs.org/)
D3js (https://d3js.org/)

Answer 2

与其尝试绘制移位的图表条，不如使用 CustomLabels 简单地移动轴标签。

ASPX:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Chart ID="Chart1" runat="server" Height="600px" Width="800px" >
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1">
                        <AxisY>
                            <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                        </AxisY>
                        <AxisX>
                            <MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
                        </AxisX>
                    </asp:ChartArea>
                </ChartAreas>
            </asp:Chart>
        </div>
    </form>
</body>
</html>

CS:

public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        int[,] horas = new int[,] { { 0, 1 }, { 1, 1 }, { 2, 0 }, { 3, 1 }, { 4, 0 }, { 5, 1 }, { 6, 0 }, { 7, 0 }, { 8, 1 }, { 9, 1 } };

        var series1 = new Series
        {
            Color = Color.Green,
            IsVisibleInLegend = false,
            IsXValueIndexed = true,
            ChartType = SeriesChartType.RangeColumn,
            CustomProperties = "PointWidth=0.8"
        };

        for (int i = 0; i < horas.GetLength(0); i++)
        {
            series1.Points.AddXY(horas[i, 0], horas[i, 1]);
        }

        Chart1.Series.Add(series1);

        Chart1.ChartAreas[0].AxisX.Interval = 1;

        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 0, ToPosition = 1, Text = "0", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 1, ToPosition = 2, Text = "1", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 2, ToPosition = 3, Text = "2", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 3, ToPosition = 4, Text = "3", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 4, ToPosition = 5, Text = "4", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 5, ToPosition = 6, Text = "5", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 6, ToPosition = 7, Text = "6", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 7, ToPosition = 8, Text = "7", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 8, ToPosition = 9, Text = "8", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 9, ToPosition = 10, Text = "9", GridTicks = GridTickTypes.All });
        Chart1.ChartAreas[0].AxisX.CustomLabels.Add(new CustomLabel { FromPosition = 10, ToPosition = 11, Text = "10", GridTicks = GridTickTypes.All });
    }
}

如何在 ASP.NET 图表中绘制位移条

How to paint a displaced bar in ASP.NET Chart

c#

asp.net

charts

webforms

asp.net-4.5