amchart 使用方法简介及简单中文API

原创于 2017-05-17 11:24:03 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #amcharts #图表

html类点专栏收录该内容

41 篇文章

订阅专栏

本文介绍了amchart的使用方法，提供了一个柱状图的参考链接，并详细说明了如何让饼图占据容器的整个空间，包括禁用标注、设置零边距和禁用片拔出功能。此外，还给出了相关的JSON配置示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo下载点击这里：下载地址

柱状图可参考优快云中文API：http://blog.youkuaiyun.com/zdw_wym/article/details/18840521

1.使饼图占据容器的整个空间

为了让馅饼采取容器的整个宽度/高度，您需要：

1）禁用标注/标签;
2）将所有边距设置为零;
3）禁用片拔出功能。

比如这种：

chart.labelsEnabled = false;//不显示label
chart.autoMargins = false;
chart.marginTop = 0;
chart.marginBottom = 0;
chart.marginLeft = 0;
chart.marginRight = 0;
chart.pullOutRadius = 0;//0为点击圆后禁止扇形向外弹出

或者如果您使用JSON配置：

AmCharts.makeChart（“chartdiv”，{
...
  labelsEnabled：false，//不显示label
  autoMargins：false，
  marginTop：0，
  marginBottom：0，
  marginLeft：0，
  marginRight：0，
  pullOutRadius：0，//0为点击圆后禁止扇形向外弹出
...
}）;

2.简单事例

var chartData1_2 = [{
            "labelTitle": "已拍摄",
            "labelvalue": 125,
            "labelUnit": "页",
            "country": "已拍摄",
            "value": 125,
            "color": "#00a7ad",
            "labelColor": "#ffffff"
        },
        {
            "country": "",
            "value": 70,
            "color": "#999",
            "labelColor": "#ffffff",
        }];
        //var p = chartData1_2[0].percents;
        var chart1_2 = AmCharts.makeChart("chartdiv1_2", {
            "type": "pie",//类型
            "dataProvider": chartData1_2,//数据
            "valueField": "value",//数值
            "titleField": "country",//名称
            "labelRadius": "-40",//label偏移量
            "colorField": "color",//填充颜色
            //"labelsEnabled": false,//不显示label
            "labelColorField": "labelColor",//label字的颜色
            "labelText": "[[labelTitle]][[labelvalue]][[labelUnit]]\n([[percents]]%)",//label显示
            "balloonText": "",//提示框
            "depth3D": 10,//3d厚度
            "angle": 30,//3d倾斜度
            "marginTop": 60,//距离上下左右的距离
            "marginBottom": 0,
            "marginRight": 25,
            "marginLeft": 25,
            "pullOutRadius": 0//0为点击圆后禁止扇形向外弹出
        });