使用数组在 amcharts.js 中创建 "normal" 折线图？

Question

我对 amCharts 执行最简单的任务感到越来越绝望。好吧，至少我认为是简单的。我想用 "normal" 数据创建一个普通折线图。正常是什么意思？好吧，有一个包含我的 y 值的数组，也许还有一个用于 x:

x = [1,2,3,4]
y = [5,6,7,8]

把这样的东西放在图表中不是很容易吗？而且我仍然坐在这里不知道如何在 amcharts 中正确地（！）做到这一点。我正在使用 Flask (Python) 并且可以使用 jsonify 将我的数组放入 JSON 文件并将其发送给客户端，但我无法再继续了。

有什么想法吗？我的意思是，这不应该是最基本的任务吗？但是所有使用 amCharts 的例子都用 x 的日期格式做特殊的事情..

非常感谢！

Answer 1

以下是最简单的定义。 dateProvider 是一个对象数组，其中每个元素代表 x 轴项目及其 y 值。

AmCharts.makeChart("your element id",{
    "type": "serial",
    "pathToImages": "http://cdn.amcharts.com/lib/3/images/",
    "categoryField": "category",
    "graphs": [
        {
            "valueField": "column-1"
        }
    ],
    "dataProvider": [
        {
            "category": "1",
            "column-1": "8"
        },
        {
            "category": "2",
            "column-1": 6
        },
        {
            "category": "3",
            "column-1": 2
        },
        {
            "category": "4",
            "column-1": 1
        }
    ]
});

实时样本： http://live.amcharts.com/2JmYT/edit/

Answer 2

首先，如果您要根据任意 X 和 Y 坐标绘制折线图（与绘制基于系列的数据相反），最好使用 XY 图表而不是系列图表。

此外，amCharts 将无法在单独的坐标数组中绘制数据。

您可以在生成数据时将数据转换为适当的格式，因此它看起来像这样：

chartData = [ {
  x: 1,
  y: 5
}, {
  x: 2,
  y: 6
}, {
  x: 3,
  y: 7
}, {
  x: 4,
  y: 8
}];

或者添加一些代码，将您的数据转换为与 amCharts 兼容的数据，然后将其提供给图表：

/**
 * Source data
 */
var x = [1,2,3,4];
var y = [5,6,7,8];

/**
 * Convert source data to AmCharts-compatible format
 */
var chartData = [];
for( var i = 0; i < x.length; i++ ) {
  chartData.push( {
    "x": x[ i ],
    "y": y[ i ]
  } )
}

/**
 * Create the chart
 */
var chart = AmCharts.makeChart( "chartdiv", {
  "type": "xy",
  "pathToImages": "http://www.amcharts.com/lib/3/images/",
  "dataProvider": chartData,
  "graphs": [ {
    "bullet": "circle",
    "bulletSize": 8,
    "lineAlpha": 1,
    "lineThickness": 2,
    "fillAlphas": 0,
    "xField": "x",
    "yField": "y",
  } ]
} );

这是上面的工作演示：

http://codepen.io/amcharts/pen/15b2c710357a7e29eda11dc5caa07d44

使用数组在 amcharts.js 中创建 "normal" 折线图？

Creating a "normal" line chart in amcharts.js with arrays?

javascript

python

json

amcharts

flask