Question

我想将最小0和最大1应用于类型的y和x轴：html中的xy图。

在EJS中，我绘制了Creating a "normal" line chart in amcharts.js with arrays?

中第一个答案的代码

html

<div id="chartdiv2"></div>

js

var y = [0,0.8481,1];
var y0 = [0,0.5,1];
var y1 = [0,0.8957,1];
var y2 = [0,0.9088,1];
var y3 = [0,0.6256,0.6745,0.8911,1];
var x = [0,0.0342,1];
var x0 = [0,0.5,1];
var x1 = [0,0.1152,1];
var x2 = [0,0.0297,1];
var x3 = [0,0.0297,0.0342,0.1152,1];
var chartData = [];

for( var i = 0; i < x.length; i++ ) {
  chartData.push( {
    "x": x[ i ],
    "y": y[ i ],
    "x0": x0[ i ],
    "y0": y0[ i ],
    "y1": y1[ i ],
    "x1": x1[ i ],
    "y2": y2[ i ],
    "x2": x2[ i ],
  } )
}

for( var i = 0; i < x3.length; i++ ) {
  chartData.push( {
    "y3": y3[ i ],
    "x3": x3[ i ]
  } );
}
var chart = AmCharts.makeChart( "chartdiv2",{
  "type": "xy",
  "pathToImages": "https://www.amcharts.com/lib/3/images/",
  "dataProvider": chartData,
  "graphs": [
    {
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x",
      "yField": "y",
    },{
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x1",
      "yField": "y1",
    },{
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x2",
      "yField": "y2",
    },{
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x3",
      "yField": "y3",
    },{
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x0",
      "yField": "y0",
    }
  ],"yAxes": [{
    "type": "ValueAxis",
    "min": 0,
    "max": 1
  }],"xAxes": [{
    "type": "ValueAxis",
    "min": 0,
    "max": 1
  }]

});

https://www.amcharts.com/docs/v4/concepts/axes/value-axis/

"yAxes": [{
    "type": "ValueAxis",
    "min": 0,
    "max": 1
  }],"xAxes": [{
    "type": "ValueAxis",
    "min": 0,
    "max": 1
  }]

应用上面的代码不会将y和x轴的最小值和最大值更改为0和1。另外，我不确定这是否正确。

Answer 1

您正在混淆两个版本。链接到的值轴文档适用于版本4，而大多数代码（以及链接的stackoverflow问题）使用的是version 3，它像这样定义value axes：

"valueAxes": [{
  "minimum": 0,
  "maximum": 1,
  "position": "left"
},{
  "minimum": 0,
  "maximum": 1,
  "position": "bottom"
}]

使用版本3更新了演示：

var y = [0,0.8481,1];
var y0 = [0,0.5,1];
var y1 = [0,0.8957,1];
var y2 = [0,0.9088,1];
var y3 = [0,0.6256,0.6745,0.8911,1];
var x = [0,0.0342,1];
var x0 = [0,0.5,1];
var x1 = [0,0.1152,1];
var x2 = [0,0.0297,1];
var x3 = [0,0.0297,0.0342,0.1152,1];
var chartData = [];

for( var i = 0; i < x.length; i++ ) {
  chartData.push( {
    "x": x[ i ],
    "y": y[ i ],
    "x0": x0[ i ],
    "y0": y0[ i ],
    "y1": y1[ i ],
    "x1": x1[ i ],
    "y2": y2[ i ],
    "x2": x2[ i ],
  } )
}

for( var i = 0; i < x3.length; i++ ) {
  chartData.push( {
    "y3": y3[ i ],
    "x3": x3[ i ]
  } );
}
var chart = AmCharts.makeChart( "chartdiv2",{
  "type": "xy",
  "pathToImages": "https://www.amcharts.com/lib/3/images/",
  "dataProvider": chartData,
  "graphs": [
    {
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x",
      "yField": "y",
    },{
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x1",
      "yField": "y1",
    },{
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x2",
      "yField": "y2",
    },{
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x3",
      "yField": "y3",
    },{
      "bullet": null,
      "bulletSize": 0,
      "lineAlpha": 1,
      "lineThickness": 2,
      "fillAlphas": 0,
      "xField": "x0",
      "yField": "y0",
    }
  ],"yAxes": [{
    "type": "ValueAxis",
    "min": 0,
    "max": 1
  }],"xAxes": [{
    "type": "ValueAxis",
    "min": 0,
    "max": 1
  }]

});

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<div id="chartdiv2" style="width: 100%; height: 300px;"></div>

如何将y轴的最小值和最大值应用于类型为xy的图表？

1 个答案: