amcharts - 如何使用 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}];

因此，条形颜色是在图表类中定义的:

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

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

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

我尝试过将粗体键作为 bool 值和字符串传递，效果是相同的。

代码和演示:

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将特殊类名称应用于各个类别轴标签。然后通过 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是必须的。如果没有它，则不会将类名称应用于图表元素，包括应通过 classNameField 提供的类名称。

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

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