调整 x 轴的最小最大值以自动调整图表
Adjust the min max values of x-axis to autofit the chart
我正在尝试在 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 是数组的数组格式。
您不需要将属性 auto-fit 设置为 true。这适用于应用了缩放的图表。
您无需设置属性 min-value 或 max-value 即可使 x-axis 自动适应。它会默认执行此操作。
问题可能出在您没有提供任何信息的图表的一部分。你的数据是如何绘制的？什么是值数组？数组的数组？
Post 完整图表 JSON 我会给你一个演示。由于您的图表是动态的，您可以通过右键单击图表来获取渲染 JSON，单击 查看源代码 选项，然后从 parsed 复制内容JSON 选项卡。
针对以下第一条评论编辑了新答案：
Array of arrays 不会自动适应 scaleX 上的图形宽度。这样做的原因是您要求绘制比一维数组更具体的东西。所以你设置 minValue 和 maxValue.
是对的
主要问题是 step 值。由于您定义的步长不如 minvalue 或 maxvalue 中的值精确，因此您必须使其匹配相同的精度。例如你放了两位小数，execpt你的步骤设置为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({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!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>
我正在尝试在 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 是数组的数组格式。
您不需要将属性 auto-fit 设置为 true。这适用于应用了缩放的图表。
您无需设置属性 min-value 或 max-value 即可使 x-axis 自动适应。它会默认执行此操作。
问题可能出在您没有提供任何信息的图表的一部分。你的数据是如何绘制的？什么是值数组？数组的数组？
Post 完整图表 JSON 我会给你一个演示。由于您的图表是动态的，您可以通过右键单击图表来获取渲染 JSON，单击 查看源代码 选项，然后从 parsed 复制内容JSON 选项卡。
针对以下第一条评论编辑了新答案：
Array of arrays 不会自动适应 scaleX 上的图形宽度。这样做的原因是您要求绘制比一维数组更具体的东西。所以你设置 minValue 和 maxValue.
主要问题是 step 值。由于您定义的步长不如 minvalue 或 maxvalue 中的值精确，因此您必须使其匹配相同的精度。例如你放了两位小数，execpt你的步骤设置为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({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!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>