Creating a “normal” line chart in amcharts.js with arrays? [closed]

问题

I'm growing desperate with amCharts doing the simplest task. Well, at least what I think is simple. I want to create a normal line chart with "normal" data. What do I mean with normal? Well, having an array with my y values, and maybe also one for x:

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

Shouldn't it be pretty easy to put something like this in a chart? And still I'm sitting here having no idea how to do this properly(!) in amcharts. I'm using Flask (Python) and can use jsonify to get my arrays into JSON files and send it to the client, but I'm not able to go any further.

Any ideas? I mean, shouldn't this be the most basic task? But all examples using amCharts doing special stuff with date formats for x..

Thank you very much!

回答1:

First things first, if you are looking at plotting a line graph out of arbitrary X and Y coordinates (as opposed plotting series-based data), you're better off using XY chart than serial one.

Also, amCharts will not be able to plot data in separate arrays of coordinates.

You can either convert the data to a proper format at the moment of generation of data, so it looks like this:

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

Or add some code that converts your data to amCharts-compatible data before supplying it to the chart:

/**
 * 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",
  } ]
} );

Here's a working demo of the above:

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

回答2:

following is the simpliest definition possible. The dateProvider is an array of objects where each element represents the x-axis item with it's y values.

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
        }
    ]
});

Live sample: http://live.amcharts.com/2JmYT/edit/

来源：https://stackoverflow.com/questions/30062352/creating-a-normal-line-chart-in-amcharts-js-with-arrays

标签

javascript

python

json

Flask

amcharts