问题描述
我正在绘制Scatter融合图（不是评估版），但是X轴标签数据存在问题。
我的图表宽度较小，因此不会显示所有x轴数据值；但是，我想显示所有x轴数据值，而宽度没有变化。
下面是示例代码：
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: "selectscatter",// disable credit label
creditLabel: false,renderAt: "chart-container",width: "350",height: "350",dataFormat: "xml",dataSource: xmldata
});
chartObj.render();
});
var xmldata = '<chart theme="fusion" caption="Products Sold vs. Price points" subcaption="Harry's SuperMart - Last Week" yaxisname="Quantity Sold" xaxisname="Price(In US $)" xaxismaxvalue="1000" xaxisminvalue="100" yaxismaxvalue="200" xnumberprefix="$" ynumbersuffix=" units" showcanvasborder="1" canvasborderthickness="0.4" canvasborderalpha="50" showxaxisline="0" showformbtn="1" formaction="#" submitdataasxml="1"><categories verticallinecolor="666666" verticallinethickness="1" alpha="40"> <category label="$100" x="100" showverticalline="0" /> <category label="$200" x="200" showverticalline="1" /> <category label="$300" x="300" showverticalline="1" /> <category label="$400" x="400" showverticalline="1" /> <category label="$500" x="500" showverticalline="1" /> <category label="$600" x="600" showverticalline="1" /> <category label="$700" x="700" showverticalline="1" /> <category label="$800" x="800" showverticalline="1" /> <category label="$900" x="900" showverticalline="1" /> <category label="$1000" x="1000" showverticalline="0" /> </categories> <dataset drawline="0" seriesname="Televisions" color="#6baa01" anchorsides="3" anchorradius="4" anchorbgcolor="#6baa01" anchorbordercolor="#6baa01"> <set id="TV_1" y="559" x="714" /> <set id="TV_2" y="293" x="988" /> <set id="TV_3" y="231" x="970" /> <set id="TV_4" y="528" x="142" /> <set id="TV_5" y="95" x="800" /> <set id="TV_6" y="515" x="813" /> <set id="TV_7" y="444" x="928" /> <set id="TV_8" y="592" x="238" /> <set id="TV_9" y="229" x="959" /> <set id="TV_10" y="238" x="521" /> <set id="TV_11" y="285" x="222" /> <set id="TV_12" y="524" x="863" /> <set id="TV_13" y="422" x="820" /> <set id="TV_14" y="344" x="894" /> <set id="TV_15" y="510" x="800" /> <set id="TV_16" y="132" x="785" /> <set id="TV_17" y="381" x="214" /> <set id="TV_18" y="210" x="961" /> <set id="TV_19" y="496" x="575" /> <set id="TV_20" y="330" x="847" /> <set id="TV_21" y="436" x="893" /> <set id="TV_22" y="406" x="157" /> <set id="TV_23" y="125" x="349" /> <set id="TV_24" y="450" x="818" /> <set id="TV_25" y="455" x="615" /> <set id="TV_26" y="328" x="256" /> <set id="TV_27" y="188" x="460" /> <set id="TV_28" y="565" x="350" /> <set id="TV_29" y="149" x="582" /> <set id="TV_30" y="425" x="970" /> </dataset> <dataset seriesname="Cell Phones" color="#f8bd19" anchorsides="4" anchorradius="4" anchorbgcolor="#f8bd19" anchorbordercolor="#f8bd19"> <set id="Mob_1" y="335" x="156" /> <set id="Mob_2" y="339" x="927" /> <set id="Mob_3" y="328" x="847" /> <set id="Mob_4" y="1" x="177" /> <set id="Mob_5" y="246" x="175" /> <set id="Mob_6" y="368" x="441" /> <set id="Mob_7" y="146" x="200" /> <set id="Mob_8" y="347" x="482" /> <set id="Mob_9" y="1" x="463" /> <set id="Mob_10" y="63" x="440" /> <set id="Mob_11" y="77" x="211" /> <set id="Mob_12" y="108" x="824" /> <set id="Mob_13" y="44" x="850" /> <set id="Mob_14" y="77" x="712" /> <set id="Mob_15" y="15" x="199" /> <set id="Mob_16" y="333" x="836" /> <set id="Mob_17" y="31" x="482" /> <set id="Mob_18" y="90" x="604" /> <set id="Mob_19" y="294" x="716" /> <set id="Mob_20" y="241" x="870" /> <set id="Mob_21" y="258" x="421" /> <set id="Mob_22" y="186" x="456" /> <set id="Mob_23" y="255" x="327" /> <set id="Mob_24" y="203" x="995" /> <set id="Mob_25" y="35" x="792" /> </dataset></chart>';
解决方法
您可以使用labelDisplay属性来配置x轴数据标签的排列和显示属性。要在不改变图表宽度的情况下显示所有x轴数据标签的情况下，可以根据需要尝试使用rotate模式，无论是否启用slantLabel属性。
请在此处检查实现：http://jsfiddle.net/eaqzL5hs/