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

标签 javascript amcharts

我正在尝试将数据传递给 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;
}

关于javascript - Amcharts 如何将数据传递给数据提供者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53754593/

相关文章:

javascript - AmMaps MapImage 在 deleteObject() 调用后出现在窗口调整大小/移动上

javascript - 如何加载 gif 直到显示图表

javascript - onclick 即使在加载 map 后 - ammap

javascript - 广度优先搜索二叉搜索树javascript实现

Javascript 事件处理程序引发 "error: CS1026: ) expected"异常

JavaScript 错误 : Object Required in ie6 & ie7

javascript - 如何在 AmCharts4 类别轴上显示所有标签或减少标签填充?

javascript - 名称值对列表,无法增加名称宽度数字

JavaScript – 原型(prototype)继承而不覆盖基类

javascript - amChart 图异常(exception)观