javascript - Amcharts 如何将数据传递给数据提供者-6ren

javascript - Amcharts 如何将数据传递给数据提供者

转载作者：行者123 更新时间：2023-11-30 19:57:43

我正在尝试将数据传递给 Amcharts 中的 dataProvider。因为我的目标是根据用户的输入来区分数据。我尝试应用此示例中使用的概念 https://codepen.io/team/amcharts/pen/e22f40f4db023433b142f0a01d165adb

喜欢下面的代码，但无法解决为什么它不起作用..

<html>
<body>

<div id="chartdivLine"></div>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>


<!-- Chart code -->
<script>

ii =250000;
mc= 2000;
years =1;

var aaR=0.05;
var aR =0.045;

var chart = AmCharts.makeChart("chartdivLine", {

    "dataDateFormat": "YYYY-MM-DD",
    "valueAxes": [{
        "id": "v1",
        "axisAlpha": 0,
        "position": "left",
        "ignoreAxisWidth":true,
        "title": "Market Value",

     }],

    "graphs": [{
        "id": "g1",
        "title": "Above Average",
        "valueField": "value1"

     },

     {
        "id": "g2",
        "title": "Average",
        "valueField": "value2"
     }

    ],
    "dataProvider": getData(),  // Stuck here
    "categoryField": "date",
    });

chart.addListener("rendered", zoomChart);

zoomChart();

function zoomChart() {
    chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}

function getData(){

var chartData =[];
chartData.push( {
      "date":"2019-01-01",
        "value1":5,
        "value2":10

    });
chartData.push( {
    "date":"2020-01-01",
        "value1":12,
        "value2":11

    });
chartData.push( {
    "date":"2021-01-01",
        "value":19,
        "value2":25

    } );

 return chartData;
}
</script>

</body>
</html>

最佳答案

您缺少 makeChart 配置对象中的图表类型(参见 https://docs.amcharts.com/3/javascriptcharts/AmChart#methods)

"type": "serial",

我的调整如下，它在我的笔中运行https://codepen.io/anon/pen/QzjxOb

var ii = 250000;
var mc = 2000;
var years = 1;

var aaR = 0.05;
var aR = 0.045;

var chart = AmCharts.makeChart("chartdivLine", {
  "type": "serial",
	"dataDateFormat": "YYYY-MM-DD",
	"valueAxes": [{
		"id": "v1",
		"axisAlpha": 0,
		"position": "left",
		"ignoreAxisWidth": true,
		"title": "Market Value",

	}],

	"graphs": [{
		"id": "g1",
		"title": "Above Average",
		"valueField": "value1"

	},

	{
		"id": "g2",
		"title": "Average",
		"valueField": "value2"
	}

	],
	"dataProvider": getData(),  // :)
	"categoryField": "date",
});

chart.addListener("rendered", zoomChart);

zoomChart();

function zoomChart() {
	chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}

function getData() {

	var chartData = [];
	chartData.push({
		"date": "2019-01-01",
		"value1": 5,
		"value2": 10

	});
	chartData.push({
		"date": "2020-01-01",
		"value1": 12,
		"value2": 11

	});
	chartData.push({
		"date": "2021-01-01",
		"value1": 19,
		"value2": 25

	});

	return chartData;
}