文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在amcharts中显示x轴上的所有值

问如何在amcharts中显示x轴上的所有值
EN

Stack Overflow用户
提问于 2018-07-31 22:08:30
回答 1查看 2.3K关注 0票数 0

我想像这样显示一个用户已经实现的确切总数：

​

​

下面是我生成图表的方法。如果我可以在x轴上显示所有的值，那么有没有办法显示确切的值呢？

代码语言：javascript
复制
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"dataProvider": [
{
    "year": "WORK--------------------",
    "income":0
},
{
    "year": "Well",
    "income": <?=$final1?>
}, {
    "year":  "Opportunity-oriented",
    "income": <?=$final2?>
}, {
    "year": "Relationship-driven",
    "income": <?=$final3?>
}, {
    "year": "Kind",
    "income": <?=$final4?>
}, 
{
    "year": "",
    "income": 0
}, 
{
    "year": "SMART-------------------",
    "income":0
},

        {
    "year": "Successful",
    "income":<?=$final5?>
},
 {
    "year": "Managerial",
    "income": <?=$final6?>
},
 {
    "year": "Action-oriented",
    "income":<?=$final7?>
},
 {
    "year": "Resilient",
    "income": <?=$final8?>
},
{
    "year": "Tenacious",
    "income": <?=$final9?>
},

    ],

    "valueAxes": [{
    "title": "Work Smart Assessment",
                              "minimum": 0,
"maximum": 5

}],
"graphs": [{
    "balloonText": "Income in [[category]]:[[value]]",
    "fillAlphas": 1,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "colorField": "color"
}],
"depth3D": 0,
"angle": 30,
"rotate": true,
"categoryField": "year",
"categoryAxis": {
    "gridPosition": "start",
    "fillAlpha": 0.05,
    "position": "left"
},
"export": {
    "enabled": true
 }
});
jquery
amcharts
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-31 22:53:29

您可以采用两种方法。

1)您可以在图表中将labelText设置为"[[value]]"，以便在列的顶部显示总计，但是您不能像截图中那样让它一直显示在边缘。您可能还希望将showAllValueLabels设置为true，以防您的值接近X轴的末端，这样您就可以强制它可见。这是最简单的选项，因为图表会自动呈现这些值：

代码语言：javascript
复制
graphs: [{
  // ...
  labelText: "[[value]]"
  showAllValueLabels: true,
  // ...
}]

演示：

​

代码语言：javascript
复制
var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "dataProvider": [{
      "year": "WORK--------------------",
      "income": 0
    },
    {
      "year": "Well",
      "income": 1.0
    }, {
      "year": "Opportunity-oriented",
      "income": 2.0
    }, {
      "year": "Relationship-driven",
      "income": 3.0
    }, {
      "year": "Kind",
      "income": 4.0
    },
    {
      "year": "",
      "income": 0
    },
    {
      "year": "SMART-------------------",
      "income": 0
    },

    {
      "year": "Successful",
      "income": 4.8
    },
    {
      "year": "Managerial",
      "income": 3.8
    },
    {
      "year": "Action-oriented",
      "income": 2.5
    },
    {
      "year": "Resilient",
      "income": 1.3
    },
    {
      "year": "Tenacious",
      "income": 1.8
    },

  ],

  "valueAxes": [{
    "title": "Work Smart Assessment",
    "minimum": 0,
    "maximum": 5

  }],
  "graphs": [{
    "balloonText": "Income in [[category]]:[[value]]",
    "fillAlphas": 1,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "labelText": "[[value]]",
    "showAllValueLabels": true,
    "colorField": "color"
  }],
  "depth3D": 0,
  "angle": 30,
  "rotate": true,
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "fillAlpha": 0.05,
    "position": "left"
  },
  "export": {
    "enabled": true
  }
});
代码语言：javascript
复制
html, body {
  width: 100%;
  height: 100%;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
代码语言：javascript
复制
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="//www.amcharts.com/lib/3/plugins/export/export.css">
<div id="chartdiv"></div>

​

2)如果您确实需要标签显示在右侧，您可以使用guides，但您需要在代码中自己生成每个标签。您还需要在图表中设置一个marginRight来说明标签。

代码语言：javascript
复制
AmCharts.makeChart("chartdiv", {
  // ...
  "marginRight": 50, //adjust as needed
  "guides": [{
      "category": "Well",
      "label": "1.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, {
      "category": "Opportunity-oriented",
      "label": "2.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, 
  // .. etc
  ],
});

演示：

​

代码语言：javascript
复制
var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "marginRight": 50,
  "guides": [{
      "category": "Well",
      "label": "1.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, {
      "category": "Opportunity-oriented",
      "label": "2.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, {
      "category": "Relationship-driven",
      "label": "3.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    }, {
      "category": "Kind",
      "label": "4.0",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Successful",
      "label": "4.8",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Managerial",
      "label": "3.8",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Action-oriented",
      "label": "2.5",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Resilient",
      "label": "1.3",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
    {
      "category": "Tenacious",
      "label": "1.8",
      "lineAlpha": 0,
      "tickLength": 0,
      "boldLabel": true,
      "position": "right"
    },
  ],
  "dataProvider": [{
      "year": "WORK--------------------",
      "income": 0
    },
    {
      "year": "Well",
      "income": 1.0
    }, {
      "year": "Opportunity-oriented",
      "income": 2.0
    }, {
      "year": "Relationship-driven",
      "income": 3.0
    }, {
      "year": "Kind",
      "income": 4.0
    },
    {
      "year": "",
      "income": 0
    },
    {
      "year": "SMART-------------------",
      "income": 0
    },

    {
      "year": "Successful",
      "income": 4.8
    },
    {
      "year": "Managerial",
      "income": 3.8
    },
    {
      "year": "Action-oriented",
      "income": 2.5
    },
    {
      "year": "Resilient",
      "income": 1.3
    },
    {
      "year": "Tenacious",
      "income": 1.8
    },

  ],

  "valueAxes": [{
    "title": "Work Smart Assessment",
    "minimum": 0,
    "maximum": 5

  }],
  "graphs": [{
    "balloonText": "Income in [[category]]:[[value]]",
    "fillAlphas": 1,
    "lineAlpha": 0.2,
    "title": "Income",
    "type": "column",
    "valueField": "income",
    "colorField": "color"
  }],
  "depth3D": 0,
  "angle": 30,
  "rotate": true,
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "fillAlpha": 0.05,
    "position": "left"
  },
  "export": {
    "enabled": true
  }
});
代码语言：javascript
复制
#chartdiv {
  width: 100%;
  height: 500px;
}
代码语言：javascript
复制
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="//www.amcharts.com/lib/3/plugins/export/export.css">
<div id="chartdiv"></div>

​

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51615368

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档