ChartJS 海图极区曲线标注

dwthyt8l 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(144)

我正在尝试使用Chart.js为极区图创建曲线标签，如下所示：

我已经找到了this issue，他们在那里讨论它，但它似乎还没有一个答案。
到目前为止，我只能在图表的侧面显示标签，但不能以曲线方式显示：

Chart.register( ChartDataLabels );

const config = {
    "type": "polarArea",
    "data": {
        "labels": [
            "aaaaaaaa",
            "bbbbbbbb",
            "cccccccc",
            "dddddddd",
            "eeeeeeee",
            "ffffffff",
            "gggggggg",
            "hhhhhhhh"
        ],
        "datasets": [
            {
                "data": [
                    80,
                    40,
                    54,
                    62,
                    71,
                    45,
                    50,
                    85
                ],
                "backgroundColor": [
                    "#674ea7",
                    "#db4b4b",
                    "#2f2f6e",
                    "#3c1414",
                    "#fc3631",
                    "#556b2f",
                    "#820000",
                    "#76a5af"
                ]
            }
        ]
    },
    "options": {
        "responsive": true,
        "scales": {
            "r": {
                "angleLines": {
                    "display": true
                },
                "ticks": {
                    "display": false
                },
                "pointLabels": {
                  "display": true,
                  "centerPointLabels": true,
                  "font": {
                    "size": 14
                  }
                }
            }
        },
        "scale": {
            "min": 0,
            "max": 100,
            "ticks": {
                "display": false,
                "beginAtZero": true
            }
        },
        "plugins": {
            "legend": {
                "position": 'top',
            },
            "datalabels": {
                "formatter": (value, context) => value + '%',
                "color": "#ffffff"
            }
        }
    }
}

const ctx = document.getElementById( 'graph' ).getContext( '2d' );

const chart = new Chart( ctx, config );

有人知道怎么做吗？

chart.js

来源：https://stackoverflow.com/questions/73876554/chartjs-polar-area-curved-labels

2条答案

按热度按时间

gstyhher1#

您可以使用chartjs-plugin-labels来实现这一点
您可以看到working example here
关键是在插件选项中将arc设置为true，将position设置为outside。例如：

{
  labels: {
    render: 'label',
    arc: true,
    fontColor: '#000',
    position: 'outside'
  }
}

赞(0）回复(0）举报 2022-11-06

gfttwv5a2#

Fraser建议使用chartjs-plugin-labels。问题是，chartjs-plugin-labels已不再维护，并且不支持Chart.js v3。
因此，您应该使用chart.js-plugin-labels-dv。此插件是从chartjs-plugin-labels派生而来，并适用于Chart.js v3。

plugins: {
  labels: {
    arc: true,
    fontColor: '#000',
    position: 'outside',
    fontSize: 14,
    render: (args) => args.dataset.helper ? args.label : '',
    fontColor: (args) => legendLabelColors[args.index] 
  }
}

请注意，labels.render可确保仅为外部（辅助）数据集绘制数据标签。
请看一看您修改后的可运行代码，看看它是如何工作的。
第一个

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS 海图极区曲线标注

2条答案

相关问题

热门标签

最新问答