标签归档:amCharts

RSS feed of amCharts

使用amCharts展示实时数据

代码参考:http://jsfiddle.net/amcharts/ATQUm/

JavaScript代码:

var chart;
var chartData = [];
var chartCursor;
var day = 0;
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);

// generate some random data, quite different range
function generateChartData() {
    for (day = 0; day < 50 ...

继续阅读

amCharts绘制柱形图默认显示数值

使用amCharts.js绘制柱形图(column chart)时,有时需要默认显示每一个柱子的数值。

通过在AmCharts.AmGraph中设置labelText属性为[[value]],即可实现上述需求。

效果如下所示:

继续阅读

使用amCharts绘制统计图表(柱状图、折线图、3D图)

amCharts

amCharts是一款优秀的数据可视化js图形库,包括Javascript Charts, Javascript Stock Chart和Interactive Javascript Maps三类产品,本文简单介绍一下Javascript Charts的用法。

amCharts的安装:

从amCharts官方网站下载所需的图形组件,将压缩包解压至备选目录。把amcharts文件夹从下载到的zip文件中拷贝至工作目录下。然后使用你熟悉的编辑器创建一个简单的html文件,例如命名为columnchart.html。

接下来,我们打开文件开始编码。

添加容器:

页面所需的唯一HTML元素就是图表的容器。我们像这样来添加一个DIV:

<body>
    <div id="chartdiv"></div>
</body>

JavaScript图表将使用这个对象作为绘图容器。请注意我们将其命名为"chartdiv",这个名字后面会用到。

引用JavaScript库文件

在页面的head部分我们需要添加amCharts JavaScript库文件的引用 ...

继续阅读