如何更改 telerik html 柱形图中第一列区域的背景颜色 (asp.net mvc)

Question

如何更改 telerik html 柱形图（asp.net 网络表单）中第一列区域的背景颜色

我想更改前 5 列的背景颜色（第一周的详细信息）

这是图表的代码：

 <telerik:RadHtmlChart  runat="server" ID="Chart" >
        <PlotArea>
            <Series>
                <telerik:ColumnSeries Name="Capacity" DataFieldY="Capacity">
                        <Appearance >
                        <FillStyle BackgroundColor="#1abc9c" ></FillStyle>
                    </Appearance>
                    <LabelsAppearance >
                            <TextStyle Bold="true" FontSize="16px" Color="#1abc9c" />
                    </LabelsAppearance>
                    <TooltipsAppearance DataFormatString="{0} Capacity" Color="White"></TooltipsAppearance>
                </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="Total Orders" DataFieldY="TotalOrders" ColorField="TotalOrdersColor">
                    <Appearance>
                        <FillStyle BackgroundColor="#bdc3c7"></FillStyle>
                    </Appearance>
                        <LabelsAppearance DataField="TotalText" >
                            <TextStyle Bold="true" FontSize="16px" Color=" #3399ff"/>
                        </LabelsAppearance>
                    <TooltipsAppearance DataFormatString="{0} Total" Color="White"></TooltipsAppearance>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries Name="Firm Orders" DataFieldY="FirmOrders">
                    <Appearance>
                        <FillStyle BackgroundColor="#9b59b6"></FillStyle>
                    </Appearance>
                        <LabelsAppearance>
                            <TextStyle Bold="true" FontSize="16px" Color="#9b59b6" />
                        </LabelsAppearance>
                    <TooltipsAppearance DataFormatString="{0} Firm" Color="White"></TooltipsAppearance>
                </telerik:ColumnSeries>

                <telerik:ColumnSeries Name="Reservations" DataFieldY="Reservations">
                    <Appearance>
                        <FillStyle BackgroundColor="#e67e22"></FillStyle>
                    </Appearance>
                    <LabelsAppearance>
                            <TextStyle Bold="true"  FontSize="16px" Color="#e67e22"/>
                        </LabelsAppearance>
                    <TooltipsAppearance DataFormatString="{0} Reservation" Color="White"></TooltipsAppearance>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries Name="Samples" DataFieldY="Samples">
                    <Appearance>
                        <FillStyle BackgroundColor="#7f8c8d"></FillStyle>
                    </Appearance>
                    <LabelsAppearance>
                            <TextStyle Bold="true" FontSize="16px" Color="#7f8c8d" />
                        </LabelsAppearance>
                    <TooltipsAppearance DataFormatString="{0} Samples" Color="White"></TooltipsAppearance>
                </telerik:ColumnSeries>
            </Series>
            <Appearance>
                <FillStyle BackgroundColor="Transparent"></FillStyle>
            </Appearance>
            <XAxis DataLabelsField="Week" AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside" 
                Reversed="false">
                <LabelsAppearance RotationAngle="0" Skip="0" Step="1" >
                    <TextStyle Bold="True" FontSize="15"></TextStyle>
                </LabelsAppearance>
                <TitleAppearance Position="Center" RotationAngle="0">
                </TitleAppearance>

            </XAxis>
            <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
                MinorTickType="None" Reversed="false">
                <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" Step="1"></LabelsAppearance>
                <TitleAppearance Position="Center" RotationAngle="0">
                </TitleAppearance>
            </YAxis>
        </PlotArea>
        <Appearance>
            <FillStyle BackgroundColor="Transparent"></FillStyle>
        </Appearance>
        <ChartTitle Text="Outerwear">
            <Appearance>
                <TextStyle Bold="True" Color="Black" FontSize="18" Italic="True" />
            </Appearance>
        </ChartTitle>
        <Legend >
            <Appearance  BackgroundColor="Transparent"  Position="Bottom" Visible="False">
                <TextStyle Bold="True"></TextStyle>
            </Appearance>
        </Legend>
    </telerik:RadHtmlChart>

Answer 1

这是 WebForms 图表标记：http://demos.telerik.com/aspnet-ajax/htmlchart/examples/overview/defaultcs.aspx

因此，这里不需要 MVC 方法。

您应该做的是使用 PlotBands 功能：http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/plot-bands

        <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server">
            <PlotArea>
                <XAxis>
                    <PlotBands>
                        <telerik:PlotBand From="0" To="1" Color="#008de7" Alpha="100" />
                    </PlotBands>
                </XAxis>
                <Series>
                    <telerik:ColumnSeries>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="2" />
                            <telerik:CategorySeriesItem Y="3" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries>
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="2" />
                            <telerik:CategorySeriesItem Y="3" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

如何更改 telerik html 柱形图中第一列区域的背景颜色 (asp.net mvc)

how to change background color of first column area in telerik html column chart (asp.net mvc)

html

asp.net

asp.net-mvc

telerik

column-chart