Question

按照主题中的说明，尝试通过调用原始处理程序来创建自定义处理程序。

adapter.notifyDataSetChaged();

因此，onClick自定义处理程序中的legendItem仅包含以下属性（出于某种原因，没有索引或datasetIndex属性）：

            legend_labels_options: {
            display: true,
            position: 'left',
            onClick: function (e, legendItem) {
                console.log(e, legendItem)
                Chart.defaults.doughnut.legend.onClick.call(this, e, legendItem)
            },
            labels: {
                generateLabels: chart => {
                    if (chart.data.datasets.length > 0) {
                        let options = {}

                        return chart.data.datasets[0].data.map((mapping, index) => {
                            options['fillStyle'] = chart.data.datasets[0].backgroundColor[index]

                            if (chart.canvas.id === 'group-hours-chart') {
                                options['text'] = this.minutesToHMS(mapping)

                                return options
                            }

                            options['text'] = chart.data.labels[index]

                            return options
                        })
                    }
                }
            }
        }

所以我不能在那里实现隐藏逻辑。

致电

fillStyle: (...)
text: (...)

什么也不做（绝对不会输出任何错误）。

我在做什么错了？

Answer 1

好的，找到了问题。我已经尝试过了，但是由于某些原因无法正常工作，但是现在（也许app.js已被缓存）是必须要做的：您应该像这样在'generatelabels'中传递'index'属性：

   legend_labels_options: {
        display: true,
        position: 'left',
        onClick: function (e, legendItem) {
            console.log(e, legendItem)
            Chart.defaults.doughnut.legend.onClick.call(this, e, legendItem)
        },
        labels: {
            generateLabels: chart => {
                if (chart.data.datasets.length > 0) {
                    let options = {}

                    return chart.data.datasets[0].data.map((mapping, index) => {
                        options['fillStyle'] = chart.data.datasets[0].backgroundColor[index]

                        if (chart.canvas.id === 'group-hours-chart') {
                            options['text'] = this.minutesToHMS(mapping)

                            return options
                        }

                        options['text'] = chart.data.labels[index]
                        options['index'] = index

                        return options
                    })
                }
            }
        }
    }

Chart.js中的甜甜圈图，自定义图例和原始处理程序的调用未按预期工作

1 个答案: