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的密钥bold应用。在数据集中：

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

我尝试将粗体键作为布尔值和字符串传递，效果相同。

代码＆amp;演示：

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传递的图表元素。

小提琴：https://jsfiddle.net/uhxuw6ov/3/

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

如何使用amcharts库有条件地为选定的categoryLabels定义粗体？

1 个答案:

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

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