I would like to hide the labels, but not the legend. How do I achieve this?
Printable View
I would like to hide the labels, but not the legend. How do I achieve this?
Hello Edgar!
Maybe I ddidn't understand your question, but I have no labels on the pie chart yet the legend shows just fine in the sample below:
Note: the generateData() function is the same defined in examples explorer.Code:<%@ Page Language="C#" %>
<script runat="server">
protected void Refresh(object sender, EventArgs e)
{
this.Chart1.GetStore().DataBind();
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Pie 3D Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var refresh = function() {
var chart = this.up('panel').down('polar'),
store = chart.getStore();
chart.setAnimation({
duration: 500,
easing: 'easeInOut'
});
store.reload();
};
var switchTheme = function () {
var panel = this.up().up(),
chart = panel.down('polar'),
currentThemeClass = Ext.getClassName(chart.getTheme()),
themes = Ext.chart.theme,
themeNames = [],
currentIndex = 0,
name;
for (name in themes) {
if (Ext.getClassName(themes[name]) === currentThemeClass) {
currentIndex = themeNames.length;
}
if (name !== 'Base' && name.indexOf('Gradients') < 0) {
themeNames.push(name);
}
}
chart.setTheme(themes[themeNames[++currentIndex % themeNames.length]]);
chart.redraw();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<h1>Pie 3D Chart Example</h1>
<p>This example shows how to create a 3D Pie chart.</p>
<p>
The example makes use of the 'rotate' interaction. To use it, click or tap and then
drag anywhere on the chart.
</p>
<ext:Panel runat="server" Width="650" Height="500" Layout="FitLayout">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Refresh" OnDirectClick="Refresh" />
<ext:Button runat="server" Text="Switch Theme" Handler="switchTheme" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:PolarChart
ID="Chart1"
runat="server"
StandardTheme="Category1">
<Background Fill="white" />
<AnimationConfig Duration="500" Easing="EaseIn" />
<Store>
<ext:Store
runat="server"
Data="<%# Ext.Net.Examples.ChartData.GenerateData(6) %>"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<LegendConfig runat="server" />
<Interactions>
<ext:RotatePie3DInteraction />
</Interactions>
<Series>
<ext:Pie3DSeries
AngleField="Data1"
Donut="30"
Distortion="0.6">
<StyleSpec>
<ext:SeriesSprite StrokeStyle="white" Opacity="0.9" />
</StyleSpec>
</ext:Pie3DSeries>
</Series>
</ext:PolarChart>
</Items>
</ext:Panel>
</form>
</body>
</html>
I should have included an example.
I want the legend to have 3m Co, Alcoa Inc etc., but no labels on the chart itself.
If I use your set up, I get no labels on the chart, but the legend has Calls1, Calls2 etc.
Code:<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script runat="server">
protected void Page_Load( object sender, EventArgs e )
{
if ( !X.IsAjaxRequest )
{
this.storeDestinations.DataSource = this.Data;
this.storeDestinations.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 270 },
new object[] { "Alcoa Inc", 253 },
new object[] { "Altria Group Inc", 217 },
new object[] { "American Express Company", 58 },
new object[] { "American International Group, Inc.", 53 },
new object[] { "AT&T Inc.", 30 },
new object[] { "Boeing Co.", 24 },
new object[] { "Caterpillar Inc.", 21 },
new object[] { "Citigroup, Inc.", 14 },
new object[] { "Exxon Mobil Corp",180 }
};
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel runat="server" Width="650" Height="500" Layout="FitLayout">
<Items>
<ext:PolarChart ID="chartDestinations" runat="server" Animation="true" Shadow="true" Flex="1">
<Background Fill="#FFFFFF"></Background>
<LegendConfig runat="server" Dock="Right" BoxStrokeWidth="0" />
<Store>
<ext:Store ID="storeDestinations" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Destination"></ext:ModelField>
<ext:ModelField Name="Calls"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Interactions>
<ext:RotatePie3DInteraction />
</Interactions>
<Series>
<ext:Pie3DSeries Donut="40" AngleField="Calls" ShowInLegend="true" Highlight="true" Colors="#94AE0A,#115FA6,#A61120,#FF8809,#FFD13E,#A61187,#24AD9A,#7C7474,#A66111,#222222">
<Label Field="Destination" Display="Rotate" Font="16px Arial">
<Renderer Handler="return '';"></Renderer>
</Label>
<Tooltip ID="Tips1" TrackMouse="true" runat="server" Width="220" Height="28" >
<Renderer Handler="toolTip.setHtml(record.get('Destination') + ': ' + record.get('Calls'));"></Renderer>
</Tooltip>
<Listeners>
<ItemClick Handler="alert('ItemClick');"></ItemClick>
</Listeners>
</ext:Pie3DSeries>
</Series>
<Plugins>
<ext:ChartItemEvents runat="server" />
</Plugins>
</ext:PolarChart>
</Items>
</ext:Panel>
</form>
</body>
</html>
Hello Edgar!
Thanks for reporting the issue! It really helps, always, to provide a simple test case with your question. The sillier it may look, always there's room for differences if no actual code is provided.
We've logged the issue as #1379 in our GitHub bug tracker, this problem has already been fixed in the latest, to-be-released ExtJS versions 6.0.3 and 6.2.0, so soon we'll be merging it with our version of Ext.NET.
Meanwhile, you can just add this override to completely inhibit label output from your chart:
I hope this should do for now!Code:<script type="text/javascript">
Ext.define('Ext.chart.series.Pie3D', {
override: 'Ext.chart.series.Pie3D',
updateLabelData: function () {
return true;
}
});
</script>
Thanks Fabricio!