0
如示例here所示,我希望設計中的列僅限於2個元素或810px的高度。這是我的代碼:jQuery可排序:限制列高度
$(".column").sortable({
connectWith: ".column",
start: function (e, ui) {
ui.placeholder.height(ui.item.height());
}
});
這是我的HTML(ASP)所希望佔這是爲了在2×2網格與各開關的地方對齊面板:
<div id="charts">
<div class="column">
<asp:Panel ID="Panel1" runat="server" Height="405px" Width="450px">
<div id="column" class="chart">
<div class="download-image">
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="PNG" Value="png" Selected="true"></asp:ListItem>
<asp:ListItem Text="PDF" Value="pdf"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Download Image" OnClick="DownloadColumnChart" OnClientClick="getSvgContent(this, 'RadHtmlChart1'); return false;" />
</div>
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" DataSourceID="SqlDataSource_TotalSales">
<PlotArea>
<Series>
<telerik:ColumnSeries DataFieldY="TotalSales">
<LabelsAppearance DataFormatString="{0:C}" Visible="false" />
<TooltipsAppearance DataFormatString="{0:C}" />
</telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="SubmitDate" MajorTickType="Outside" Step="1" MinorTickType="None">
<MinorGridLines Visible="false" />
<MajorGridLines Visible="false" />
<LabelsAppearance RotationAngle="-70" DataFormatString="{0}">
</LabelsAppearance>
</XAxis>
<YAxis>
<LabelsAppearance DataFormatString="${0}">
</LabelsAppearance>
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false">
</Appearance>
</Legend>
</telerik:RadHtmlChart>
</div>
</asp:Panel>
<asp:Panel ID="Panel3" runat="server" Height="405px" Width="450px">
<div id="bar" class="chart">
<div class="download-image">
<asp:DropDownList ID="DropDownList3" runat="server">
<asp:ListItem Text="PNG" Value="png" Selected="true"></asp:ListItem>
<asp:ListItem Text="PDF" Value="pdf"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button3" runat="server" Text="Download Image" OnClick="DownloadBarChart" OnClientClick="getSvgContent(this, 'RadHtmlChart3'); return false;" />
</div>
<telerik:RadHtmlChart ID="RadHtmlChart3" runat="server" DataSourceID="SqlDataSource_TotalSales">
<PlotArea>
<Series>
<telerik:BarSeries DataFieldY="TotalSales">
<LabelsAppearance DataFormatString="{0:C}" Visible="false" />
<TooltipsAppearance DataFormatString="{0:C}" />
</telerik:BarSeries>
</Series>
<XAxis DataLabelsField="SubmitDate" MajorTickType="None" MinorTickType="None">
<MinorGridLines Visible="false" />
<MajorGridLines Visible="false" />
<LabelsAppearance RotationAngle="0" DataFormatString="{0}">
</LabelsAppearance>
</XAxis>
<YAxis>
<LabelsAppearance DataFormatString="${0}">
</LabelsAppearance>
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false">
</Appearance>
</Legend>
</telerik:RadHtmlChart>
</div>
</asp:Panel>
</div>
<div class="column">
<asp:Panel ID="Panel2" runat="server" Height="405px" Width="450px">
<div id="pie" class="chart">
<div class="download-image">
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem Text="PNG" Value="png" Selected="true"></asp:ListItem>
<asp:ListItem Text="PDF" Value="pdf"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button2" runat="server" Text="Download Image" OnClick="DownloadPieChart" OnClientClick="getSvgContent(this, 'RadHtmlChart2'); return false;" />
</div>
<telerik:RadHtmlChart ID="RadHtmlChart2" runat="server"
Transitions="true" DataSourceID="SqlDataSource_TotalSales">
<PlotArea>
<Series>
<telerik:PieSeries DataFieldY="TotalSales" StartAngle="90">
<LabelsAppearance ClientTemplate="#=dataItem.SubmitDate#" Position="Circle"
DataFormatString="{0:C}">
</LabelsAppearance>
<TooltipsAppearance DataFormatString="{0:C}" />
</telerik:PieSeries>
</Series>
<XAxis DataLabelsField="SubmitDate" Visible="true">
</XAxis>
<YAxis>
<LabelsAppearance DataFormatString="{0:C}">
</LabelsAppearance>
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false">
</Appearance>
</Legend>
</telerik:RadHtmlChart>
</div>
</asp:Panel>
<asp:Panel ID="Panel4" runat="server" Height="405px" Width="450px">
<div id="line" class="chart">
<div class="download-image">
<asp:DropDownList ID="DropDownList4" runat="server">
<asp:ListItem Text="PNG" Value="png" Selected="true"></asp:ListItem>
<asp:ListItem Text="PDF" Value="pdf"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button4" runat="server" Text="Download Image" OnClick="DownloadLineChart" OnClientClick="getSvgContent(this, 'RadHtmlChart4'); return false;" />
</div>
<telerik:RadHtmlChart ID="RadHtmlChart4" runat="server" DataSourceID="SqlDataSource_TotalSales">
<PlotArea>
<Series>
<telerik:LineSeries DataFieldY="TotalSales">
<LabelsAppearance DataFormatString="{0:C}" Visible="false" />
<TooltipsAppearance DataFormatString="{0:C}" />
</telerik:LineSeries>
</Series>
<XAxis DataLabelsField="SubmitDate" MajorTickType="Outside" MinorTickType="None">
<MinorGridLines Visible="false" />
<MajorGridLines Visible="false" />
<LabelsAppearance RotationAngle="-70" DataFormatString="{0}">
</LabelsAppearance>
</XAxis>
<YAxis>
<LabelsAppearance DataFormatString="${0}">
</LabelsAppearance>
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false">
</Appearance>
</Legend>
</telerik:RadHtmlChart>
</div>
</asp:Panel>
</div>
</div>
要清楚,我要的是這個網格圖表留固定在2×2:
什麼我得到是這樣的,一個3x2的網格:
那些餅圖顏色傷樣本我的眼睛。 – Tyrsius
我同意 - 他們是默認設置。 –