Question

我可以在amcharts js中为Y轴设置自定义标签值吗？例如：将10,20,30，... y轴值转换为“非常低”，“低”，“高”＆＃39;

Answer 1

这里有两种解决方案。

第一个解决方案在valueAxis中使用labelFunction来指定在图表上绘制的值所需的标签，即

  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代替在轴上的适当点绘制轴标签，线和刻度线，同时禁用轴生成的轴标签，以确保获得正确的线： / p>

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>

Answer 2

var chart = AmCharts.makeChart("chartdiv", {
  type: "serial",
  theme: "light",
  valueAxes: [
    {
      minimum: 0,
      maximum: 100,
      strictMinMax: true,
      labelsEnabled: false,
      gridAlpha: 0,
      tickLength: 0,
      guides: [{
        value: 10,
        tickLength: 2,
        lineAlpha: .15,
        label: "Very Low"
      },{
        value: 20,
        tickLength: 2,
        lineAlpha: .15,
        label: "Low"
      },{
        value: 30,
        tickLength: 2,
        lineAlpha: .15,
        label: "Average"
      },{
        value: 40,
        tickLength:2,
        lineAlpha: .15,
        label: "Above Average"
      },{
        value: 50,
        tickLength: 2,
        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.1,
      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>

Answer 3

在v4中，您可以使用adapters来实现这一目标。

amcharts中Y轴的自定义标签值

3 个答案: