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

Question

我想像这样显示用户达到的确切总数：

这是我生成图表的方法。有什么方法可以显示确切的值，如果我可以在 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
 }
});

Answer 1

您可以采用两种方法。

1) 如果您的值接近 X 轴的末端，您可以将 labelText to "[[value]]" in your graph to display the total on top of the column, however you can't make it display all the way at the edge like in your screenshot. You might also want to set showAllValueLabels 设置为 true，以便您可以强制它可见。这是最简单的选项，因为值由图表自动呈现：

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>

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

how to show all the values on x-axis in amcharts

jquery

amcharts