Question

我越来越渴望amCharts做最简单的任务。好吧，至少我认为很简单。我想用＆＃34; normal＆＃34;创建一个普通的折线图。数据。我对正常意味着什么？好吧，有一个带有y值的数组，也许还有一个用于x：

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

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

有什么想法吗？我的意思是，这不应该是最基本的任务吗？但所有使用amCharts的例子都用x ..

的日期格式做特殊的事情

非常感谢！

Answer 1

首先，如果您正在考虑从任意X和Y坐标绘制线图（而不是绘制基于系列的数据），您最好使用XY图表而不是序列图表。

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

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

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

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

/**
 * 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

Answer 2

以下是最简单的定义。 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/

创建一个＆＃34; normal＆＃34;带有数组的amcharts.js中的折线图？

2 个答案: