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

时间：2018-07-31 14:08:30

标签： jquery amcharts

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

enter image description here

这是我生成图表的方式。如果我可以在x轴上显示所有可以正常工作的值，是否有任何方法可以显示确切的值。 

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

1 个答案:

答案 0 :(得分：3)

您可以采用两种方法。

1）您可以在图表中将labelText设置为"[[value]]"，以将总计显示在该列的顶部，但是您不能像在屏幕截图中那样始终将其显示在边缘。您可能还想将showAllValueLabels设置为true，以防您的值接近X轴的末端，以便可以使其可见。这是最简单的选项，因为值由图表自动呈现：

graphs: [{
  // ...
  labelText: "[[value]]"
  showAllValueLabels: true,
  // ...
}]

演示：

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
  }
});
html, body {
  width: 100%;
  height: 100%;
}

#chartdiv {
  width: 100%;
  height: 100%;
}
<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来说明标签。

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

演示：

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
  }
});
#chartdiv {
  width: 100%;
  height: 500px;
}
<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>

相关问题
最新问题