调整x轴的最小最大值以自动调整图表

Question

我试图在angular2中绘制一个zing图表。我的图表就是这样的。

虽然我希望我的图表看起来像下面提供的图表，但是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： bidArray 和 askArray 属于数组格式数组。

Answer 1

您无需将属性auto-fit设置为true。这适用于已应用缩放的图表。

您无需设置属性min-value或max-value即可自动调整x轴。它默认会这样做。

问题可能在于您没有提供任何信息的图表的一部分。您的数据如何绘制？什么是值数组？阵列数组？

发布完整的图表JSON，我将为您提供演示工作。由于您的图表是动态的，您可以通过右键单击图表，单击查看源选项，然后从已解析的JSON 选项卡复制内容来获取渲染JSON。

对以下第一篇评论作出回应的新答案：

数组数组不会自动适合scaleX上的图形宽度。原因是你要求绘制比单维数组更具体的东西。因此，您可以设置minValue和maxValue。

主要问题是step值。由于您定义的步骤不如minvalue或maxvalue中的值精确，因此必须使其匹配相同的精度。例如，你输入两个小数，execpt你的步骤设置为step:.2，其精度只有一位小数。将精度更改为两个。 step:.01 || .02以获得您想要的结果。

一个简短的说明。您有两个scale-x个对象。它们在内部合并，但这很危险，因为较低的一个将覆盖第一个。如果你有一个大的JSON，这就变得更难调试。

demo link

＆＃13;

＆＃13;

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({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;