調整x軸的最小值最大值以自動調整圖表

我正試圖在angular2中繪製一張zing圖表。我的圖表就是這樣。調整x軸的最小值最大值以自動調整圖表

雖然我希望我的圖表看起來像我在下面提供的圖表，所以x軸的最小值和最大值會自動調整以適合圖表的區域和水平寬度。

我該如何去做這件事？我遵循這些鏈接，但無法獲得理想的結果。你能指出我哪裏錯了嗎？ https://www.zingchart.com/docs/tutorials/chart-elements/configure-chart-scales/#scale-formatting 是我給繪製圖表如下選項：

this.charts = [{ 
      id : 'chart-1', 
      data : { 
       'type' : 'area', 
       'scaleX': { 
       'label': {'text': 'Price'} 
       }, 
       'scaleY': { 
       'label': {'text': 'Cumulative Volume'} 
       }, 
       'plotarea': { 
       'adjust-layout': true /* For automatic margin adjustment. */ 
       }, 
       'scale-x': { 
       'auto-fit': true, 
       'min-value': minValue, 
       'max-value': maxValue, 
       'decimals': 2 

       }, 
       'series': [ 
       { 'values': this.bidArray }, 
       { 'values': this.askArray } 
       ], 
      }, 
      height: 300, 
      width: 600 
     }]; 
    }

編輯1： 比達雷和askArray是數組的格式陣列。

來源

2017-02-06 codestruggle

您不需要將屬性auto-fit設置爲true。這適用於應用了縮放的圖表。

您不需要設置屬性min-value或max-value以使x軸自動適應。它會默認執行此操作。

問題可能在於您沒有提供任何信息的圖表的一部分。你的數據如何繪製？什麼是數組值？數組陣列？

發佈完整的圖表JSON，我會給你演示工作。由於您的圖表是動態的，因此您可以通過右鍵單擊圖表來獲取渲染JSON，單擊查看源代碼選項，然後複製解析的JSON選項卡中的內容。

EDITED新的應答響應於第一評論BELOW：

陣列陣列不會自動適應上的scaleX圖形寬度。原因是你要求繪製比單維數組更具體的東西。所以你是正確的設置minValue和maxValue。

主要問題是step的值。由於您定義的步驟不如minvalue或maxvalue中的值精確，因此您必須使其匹配相同的精度。例如，你把兩位小數，你的步驟設置爲step:.2，這只是一位小數的精度。將該精度更改爲兩個。 step:.01 || .02以獲得所需的結果，您正在尋找。

一個快速旁註。您有兩個scale-x對象。他們在內部合併，但這是危險的，因爲較低的將覆蓋第一個。如果你有一個大的JSON，這將變得更難調試。

var myConfig = { 
 
"graphset":[ 
 
    { 
 
     "type":"area", 
 
     "title":{ 
 
      "text":"Market Depth", 
 
      "font-size":14, 
 
      "offset-x":-200, 
 
      "offset-y":-5 
 
     }, 
 
     "scaleY":{ 
 
      "label":{ 
 
       "text":"Cumulative Volume" 
 
      } 
 
     }, 
 
     "plotarea":{ 
 
      "adjust-layout":true 
 
     }, 
 
     "scale-x":{ 
 
      "min-value":10.091, 
 
      "max-value":11.308, 
 
      "step": .01, 
 
      "decimals":2, 
 
      "label":{ 
 
       "text":"Price" 
 
      } 
 
     }, 
 
     "series":[ 
 
      { 
 
       "values":[[10.091,23128.285630000002], 
 
       [10.092,22272.984500000002], 
 
       [10.094,22070.219080000003], 
 
       [10.118,21630.372470000002], 
 
       [10.145,21278.48053], 
 
       [10.169,20438.89872], 
 
       [10.209,19798.506260000002], 
 
       [10.218,19128.53049], 
 
       [10.293,18200.525190000004], 
 
       [10.316,17625.84755], 
 
       [10.341,16860.282690000004], 
 
       [10.352,16752.07929], 
 
       [10.363,15806.925830000002], 
 
       [10.366,15351.489590000001], 
 
       [10.372,15088.74344], 
 
       [10.393,14793.26244], 
 
       [10.401,13968.11667], 
 
       [10.423,13873.98204], 
 
       [10.456,13655.87469], 
 
       [10.476,12866.84064], 
 
       [10.535,12518.24981], 
 
       [10.602,12503.24074], 
 
       [10.623,11940.5453], 
 
       [10.632,11939.08057], 
 
       [10.634,11838.884329999999], 
 
       [10.663,11074.893349999998], 
 
       [10.663,10963.316989999998], 
 
       [10.666,10584.14343], 
 
       [10.667,10358.20835], 
 
       [10.671,9942.126730000002], 
 
       [10.672,9265.449410000001], 
 
       [10.674,8497.838590000001], 
 
       [10.679,7865.162790000001], 
 
       [10.694,7349.383660000001], 
 
       [10.713,6672.761850000002], 
 
       [10.736,6026.31731], 
 
       [10.741,5674.348190000001], 
 
       [10.752,5186.775390000001], 
 
       [10.759,4317.745790000001], 
 
       [10.807,3807.78019], 
 
       [10.827,3638.4528899999996], 
 
       [10.831,2816.4248099999995], 
 
       [10.834,2426.4046799999996], 
 
       [10.854,2423.4017], 
 
       [10.854,2184.2459999999996], 
 
       [10.855,1448.32144], 
 
       [10.856,481.7664500000001], 
 
       [10.865,92.60541], 
 
       [10.87,59.9149], 
 
       [10.874,10.04495]], 
 
       backgroundColor: '#424242', 
 
       alphaArea:.56, 
 
       lineColor: '#424242', 
 
       marker: { 
 
        backgroundColor:'#424242', 
 
        visible:true 
 
       } 
 
      }, 
 
      { 
 
       "values":[[11.308,26417.464129999997], 
 
       [11.285,26220.324189999996], 
 
       [11.208,25644.388599999995], 
 
       [11.194,25628.031659999997], 
 
       [11.188,25031.713569999996], 
 
       [11.182,24205.770269999997], 
 
       [11.144,23534.17388], 
 
       [11.142,22947.082829999996], 
 
       [11.113,22639.772689999994], 
 
       [11.105,22536.636229999993], 
 
       [11.09,21987.267979999993], 
 
       [11.087,21137.004579999997], 
 
       [11.084,20341.394259999997], 
 
       [11.075,19372.91412], 
 
       [11.074,18554.458], 
 
       [11.064,17632.22014], 
 
       [11.053,17063.184230000003], 
 
       [11.05,16285.860740000004], 
 
       [11.033,15644.169050000006], 
 
       [11.022,15330.170840000004], 
 
       [11.018,14424.291480000005], 
 
       [11.007,13641.930940000004], 
 
       [11.001,12755.045610000003], 
 
       [10.999,12266.619580000002], 
 
       [10.992,12034.113860000001], 
 
       [10.981,11362.05282], 
 
       [10.98,10739.11108], 
 
       [10.977,9945.179989999999], 
 
       [10.976,8958.965719999998], 
 
       [10.974,8579.633059999998], 
 
       [10.972,8124.936529999999], 
 
       [10.966,7918.067119999999], 
 
       [10.964,7038.952039999999], 
 
       [10.962,6756.983329999999], 
 
       [10.96,6028.072429999998], 
 
       [10.955,5516.051169999999], 
 
       [10.946,4738.703779999999], 
 
       [10.943,4436.934409999999], 
 
       [10.941,4417.186269999998], 
 
       [10.94,4120.44594], 
 
       [10.939,3830.56787], 
 
       [10.925,3414.84425], 
 
       [10.923,3335.96724], 
 
       [10.922,3025.91816], 
 
       [10.92,2119.4797900000003], 
 
       [10.908,1469.96346], 
 
       [10.903,1269.4567200000001], 
 
       [10.892,630.18796], 
 
       [10.891,273.01724], 
 
       [10.89,103.07879]], 
 
       backgroundColor: '#c62828', 
 
       alphaArea:.56, 
 
       lineColor: '#c62828', 
 
       marker: { 
 
        backgroundColor:'#c62828', 
 
        visible:true 
 
       } 
 
      } 
 
     ] 
 
    } 
 
] 
 
}; 
 

 
zingchart.render({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});

html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
} 
 
.zc-ref { 
 
\t display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div> 
 
\t </body> 
 
</html>

來源

2017-02-06 16:33:20 nardecky

根據您的指示我創建了一個GitHub的依據。非常感謝你的幫助。 HTTPS：//gist.github。com/agatsoh/ed10be74f211a1ca6082629975adad33 – codestruggle

非常感謝你爲我解決這個問題。最重要的一點是不要同時有兩個scaleX和scale-x對象，只有一個scale-x對象。 – codestruggle

調整x軸的最小值最大值以自動調整圖表

回答

相關問題