amcharts - amcharts 中 Y 轴的自定义标签值

Question

我可以在 amcharts js 中设置 Y 轴的自定义标签值吗？ 示例:将 10,20,30,... y 轴值转换为 'very low','low','high'

Answer 1

这里有两种解决方案。

第一个解决方案使用 labelFunction在您的 valueAxis 中指定您想要给定图表上绘制的值的标签，即

  valueAxes: [
    {
      minimum: 0,
      maximum: 50,
      strictMinMax: true,
      labelFunction: function(value, valueText, valueAxis) {
        switch (value) {
          case 10:
            valueText = "Very Low";
            break;
          case 20:
            valueText = "Low";
            break;
          case 30:
            valueText = "Average";
            break;
          case 40:
            valueText = "Above Average";
            break;
          case 50:
            valueText = "High";
            break;
          default:
            valueText = "";
        }
        return valueText;
      }
    }
  ],

演示:

var chart = AmCharts.makeChart("chartdiv", {
  type: "serial",
  theme: "light",
  valueAxes: [
    {
      minimum: 0,
      maximum: 50,
      strictMinMax: true,
      labelFunction: function(value, valueText, valueAxis) {
        switch (value) {
          case 10:
            valueText = "Very Low";
            break;
          case 20:
            valueText = "Low";
            break;
          case 30:
            valueText = "Average";
            break;
          case 40:
            valueText = "Above Average";
            break;
          case 50:
            valueText = "High";
            break;
          default:
            valueText = "";
        }
        return valueText;
      }
    }
  ],
  dataProvider: [
    {
      category: "cat-1",
      value: 32
    },
    {
      category: "cat-2",
      value: 41
    },
    {
      category: "cat-3",
      value: 27
    },
    {
      category: "cat-4",
      value: 29
    },
    {
      category: "cat-5",
      value: 22
    },
    {
      category: "cat-6",
      value: 11
    },
    {
      category: "cat-7",
      value: 46
    },
    {
      category: "cat-8",
      value: 18
    },
    {
      category: "cat-9",
      value: 32
    },
    {
      category: "cat-10",
      value: 32
    }
  ],
  graphs: [
    {
      fillAlphas: 0.9,
      lineAlpha: 0.2,
      type: "column",
      valueField: "value"
    }
  ],
  categoryField: "category"
});

#chartdiv {
  width: 100%;
  height: 300px;
}

<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>

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

请注意，此解决方案有点脆弱，因为您依赖值轴来生成正确的比例(例如，增量为 10)，并且没有一种有保证的方法来控制它。

更好的解决方案是使用 guides而是在轴上适当的点绘制轴标签、线条和刻度，同时禁用轴生成的标签、线条和刻度以确保获得正确的线条:

valueAxes: [
    {
      minimum: 0,
      maximum: 50,
      strictMinMax: true,
      //disable the axis' labels, gridAlpha and tickLength so you can
      //draw them using guides
      labelsEnabled: false, 
      gridAlpha: 0,
      tickLength: 0,
      guides: [{
        value: 10,
        tickLength: 5,
        lineAlpha: .15,
        label: "Very Low"
      },{
        value: 20,
        tickLength: 5,
        lineAlpha: .15,
        label: "Low"
      },{
        value: 30,
        tickLength: 5,
        lineAlpha: .15,
        label: "Average"
      },{
        value: 40,
        tickLength: 5,
        lineAlpha: .15,
        label: "Above Average"
      },{
        value: 50,
        tickLength: 5,
        lineAlpha: .15,
        label: "High"
      }]
    }
  ]

演示:

var chart = AmCharts.makeChart("chartdiv", {
  type: "serial",
  theme: "light",
  valueAxes: [
    {
      minimum: 0,
      maximum: 50,
      strictMinMax: true,
      labelsEnabled: false,
      gridAlpha: 0,
      tickLength: 0,
      guides: [{
        value: 10,
        tickLength: 5,
        lineAlpha: .15,
        label: "Very Low"
      },{
        value: 20,
        tickLength: 5,
        lineAlpha: .15,
        label: "Low"
      },{
        value: 30,
        tickLength: 5,
        lineAlpha: .15,
        label: "Average"
      },{
        value: 40,
        tickLength: 5,
        lineAlpha: .15,
        label: "Above Average"
      },{
        value: 50,
        tickLength: 5,
        lineAlpha: .15,
        label: "High"
      }]
    }
  ],
  dataProvider: [
    {
      category: "cat-1",
      value: 32
    },
    {
      category: "cat-2",
      value: 41
    },
    {
      category: "cat-3",
      value: 27
    },
    {
      category: "cat-4",
      value: 29
    },
    {
      category: "cat-5",
      value: 22
    },
    {
      category: "cat-6",
      value: 11
    },
    {
      category: "cat-7",
      value: 46
    },
    {
      category: "cat-8",
      value: 18
    },
    {
      category: "cat-9",
      value: 32
    },
    {
      category: "cat-10",
      value: 32
    }
  ],
  graphs: [
    {
      fillAlphas: 0.9,
      lineAlpha: 0.2,
      type: "column",
      valueField: "value"
    }
  ],
  categoryField: "category"
});

#chartdiv {
  width: 100%;
  height: 300px;
}

<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>

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