散点融合图-宽度与X轴

问题描述

我正在绘制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&#39;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/