如何使用 amcharts 库有条件地为选定的类别标签定义粗体？

Question

问题：

我无法使用 amcharts 库将粗体属性传递给 Axis 类别中的所需标签。

案例：

我可以使用数据集本身为图表的每个元素传递 fillColor。这是我正在使用的数据集结构的示例：

var ordArray2 = [{"shop_name":"eBay - marsmediagmbh1","price_with_shipping":"369.00","color":"#769CC1","bold":false},{"shop_name":"CHECK24","price_with_shipping":"375.00","color":"#228172","bold":true}];

因此，条形颜色在图表中定义 class:

"graphs": [
                        {
                            "colorField": "color",
                            "fillAlphas": 1,
                            "id": "AmGraph-1",
                            "lineColorField": "color",
                            "title": "graph 1",
                            "type": "column",
                            "valueField": "price_with_shipping",
                            "balloonText" : "[[category]]: <b>[[value]] €</b>"
                        }
                    ]

但是，这个原则似乎在 class categoryAxis 中不起作用，因为下面的代码只是将粗体应用于所有标签，而不仅仅是那些标记为 true 的标签数据集中的键bold：

 "categoryAxis": {
        "autoRotateAngle": 45,
            "autoRotateCount": 0,
            "gridPosition": "start",
            "titleRotation": null,
            "boldLabels": "bold"
    }

我试过将粗体键作为布尔值和字符串传递，效果是一样的。

代码与演示：

https://jsfiddle.net/uhxuw6ov/1/embedded/result/

Answer 1

目前没有直接选项可以为单个类别轴标签设置字体粗细。

有几个选项供您考虑：

选项 1：使用不同的颜色来区分各个标签

为此你可以使用 labelColorField:

"categoryAxis": {
  "autoRotateAngle": 45,
  "autoRotateCount": 0,
  "gridPosition": "start",
  "boldLabels": "bold",
  "labelColorField": "color"
}

举个例子： https://jsfiddle.net/uhxuw6ov/2/

选项 2：使用 CSS 设置单个标签的字体粗细

您可以使用 classNameField 将特殊的 class 名称应用于各个分类轴标签。然后通过 CSS.

定位他们

在数据中：

{
  "shop_name": "Alternate.de",
  "price_with_shipping": "405.95",
  "color": "#2c3e50",
  "labelClass": "bold-label"
}

在图表配置中：

"addClassNames": true,
"categoryAxis": {
  "autoRotateAngle": 45,
  "autoRotateCount": 0,
  "gridPosition": "start",
  "classNameField": "labelClass"
}

注意，addClassNames 是必需的。没有它，class 名称将不会应用于图表元素，包括那些应该来自 classNameField.

的元素

Fiddle: https://jsfiddle.net/uhxuw6ov/3/

请注意，CSS 方法适用于支持 SVG 的现代浏览器。不支持 SVG 的旧版 IE 将忽略此设置。

如何使用 amcharts 库有条件地为选定的类别标签定义粗体？

How to conditionally define bold for selected categoryLabels using amcharts library?

amcharts

选项 1：使用不同的颜色来区分各个标签

选项 2：使用 CSS 设置单个标签的字体粗细