javascript - Amcharts - 一些标签中的 HTML 标签

Question

我使用以下图表:http://www.amcharts.com/demos/stacked-bar-chart-with-negative-values/#theme-none

现在我想给一些标签添加html标签。 (不是全部。)

例子:(这里我想用strong)

"dataProvider": [{
    "age": "<strong>85+</strong>",
    "male": -0.1,
    "female": 0.3
  }, {
    "age": "80-54",
    "male": -0.2,
    "female": 0.3
  }, ..... ],

结果:

Answer 1

amCharts 中的类别轴标签是 SVG 节点，因此不支持 HTML 标签。

您可以做的是使用 CSS 定位特定标签。

为此，您首先需要通过设置 "addClassNames": true 启用 CSS 类对图表元素的应用。 .

然后使用 CSS 定位标签。每个类别轴标签都有类 "amcharts-axis-label" 集。您可以使用 CSS 的 nth-child 选择器定位第一个:

.amcharts-category-axis .amcharts-axis-label:nth-child(1) tspan {
  font-weight: bold;
}

(我还使用了 .amcharts-category-axis 选择器，因此值轴标签不是它的目标)

这是包含上述工作的整个工作图表:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "rotate": true,
  "addClassNames": true,
  "marginBottom": 50,
  "dataProvider": [{
    "age": "85+",
    "male": -0.1,
    "female": 0.3
  }, {
    "age": "80-54",
    "male": -0.2,
    "female": 0.3
  }, {
    "age": "75-79",
    "male": -0.3,
    "female": 0.6
  }, {
    "age": "70-74",
    "male": -0.5,
    "female": 0.8
  }, {
    "age": "65-69",
    "male": -0.8,
    "female": 1.0
  }, {
    "age": "60-64",
    "male": -1.1,
    "female": 1.3
  }, {
    "age": "55-59",
    "male": -1.7,
    "female": 1.9
  }, {
    "age": "50-54",
    "male": -2.2,
    "female": 2.5
  }, {
    "age": "45-49",
    "male": -2.8,
    "female": 3.0
  }, {
    "age": "40-44",
    "male": -3.4,
    "female": 3.6
  }, {
    "age": "35-39",
    "male": -4.2,
    "female": 4.1
  }, {
    "age": "30-34",
    "male": -5.2,
    "female": 4.8
  }, {
    "age": "25-29",
    "male": -5.6,
    "female": 5.1
  }, {
    "age": "20-24",
    "male": -5.1,
    "female": 5.1
  }, {
    "age": "15-19",
    "male": -3.8,
    "female": 3.8
  }, {
    "age": "10-14",
    "male": -3.2,
    "female": 3.4
  }, {
    "age": "5-9",
    "male": -4.4,
    "female": 4.1
  }, {
    "age": "0-4",
    "male": -5.0,
    "female": 4.8
  }],
  "startDuration": 1,
  "graphs": [{
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "male",
    "title": "Male",
    "labelText": "[[value]]",
    "clustered": false,
    "labelFunction": function(item) {
      return Math.abs(item.values.value);
    },
    "balloonFunction": function(item) {
      return item.category + ": " + Math.abs(item.values.value) + "%";
    }
  }, {
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "female",
    "title": "Female",
    "labelText": "[[value]]",
    "clustered": false,
    "labelFunction": function(item) {
      return Math.abs(item.values.value);
    },
    "balloonFunction": function(item) {
      return item.category + ": " + Math.abs(item.values.value) + "%";
    }
  }],
  "categoryField": "age",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0.2,
    "axisAlpha": 0
  },
  "valueAxes": [{
    "gridAlpha": 0,
    "ignoreAxisWidth": true,
    "labelFunction": function(value) {
      return Math.abs(value) + '%';
    },
    "guides": [{
      "value": 0,
      "lineAlpha": 0.2
    }]
  }],
  "balloon": {
    "fixedPosition": true
  },
  "chartCursor": {
    "valueBalloonsEnabled": false,
    "cursorAlpha": 0.05,
    "fullWidth": true
  },
  "allLabels": [{
    "text": "Male",
    "x": "28%",
    "y": "97%",
    "bold": true,
    "align": "middle"
  }, {
    "text": "Female",
    "x": "75%",
    "y": "97%",
    "bold": true,
    "align": "middle"
  }]
});

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

.amcharts-category-axis .amcharts-axis-label:nth-child(1) tspan {
  font-weight: bold;
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>