jquery 如何禁用chartjs dclick

bweufnob 于 2024-01-07 发布在 jQuery

关注(0)|答案(6)|浏览(198)

我想禁用chart.js蜘蛛图图例点击，因为当我点击图例时，数据序列隐藏了相关的值集，如下图所示。
x1c 0d1x的数据

的
我的要求是我不想禁用数据集。我已经尝试了preventDefault（）;在图表上单击，但它不起作用。
我的代码示例附在下面。请检查。

<!doctype html>
<html>
<head>
    <title>Radar Chart</title>
    <script src="../dist/Chart.bundle.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
    <div style="width:75%">
        <canvas id="canvas"></canvas>
    </div>
    <script>
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };
    var randomColorFactor = function() {
        return Math.round(Math.random() * 255);
    };
    var randomColor = function(opacity) {
        return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
    };
    var config = {
        type: 'radar',
        data: {
            labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
            datasets: [{
                label: "My First dataset",
                backgroundColor: "rgba(0,0,0,0.5)",
                pointBackgroundColor: "rgba(220,220,220,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            },  {
                label: "My Second dataset",
                backgroundColor: "rgba(0,120,0,0.5)",
                pointBackgroundColor: "rgba(151,187,205,1)",
                hoverPointBackgroundColor: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
            },]
        },
        options: {
            legend: {
                position: 'top',
                onClick: (e) => e.stopPropagation()
            },
            title: {
                display: true,
                text: ''
            },
            scale: {
              reverse: false,
              gridLines: {
                color: ['black']
              },
              ticks: {
                beginAtZero: true
              }
            }
        }
    };
    window.onload = function() {
        window.myRadar = new Chart(document.getElementById("canvas"), config);
    };
    </script>
</body>
</html>

字符串

jquery

来源：https://stackoverflow.com/questions/38583894/how-to-disable-chartjs-legendclick

6条答案

按热度按时间

bfnvny8b1#

根据文档，有一个onClick处理器用于暴露事件对象的图例。如果你stopPropagation，它会停止隐藏数据序列：

let chart = new Chart(elem.find('canvas')[0], {
                type: 'line',
                data: {
                    labels: [],
                    datasets: []
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        onClick: (e) => e.stopPropagation()
                    }
                }
            });

字符串
以上是ES6，如果您不使用下面支持的浏览器，则是较旧的ES5等效。

legend: {
    onClick: function (e) {
        e.stopPropagation();
    }
}

型
Chartjs必须在legend.onClick之后注册自己的click事件，这就是为什么这会停止它的执行。
docs

展开查看全部

赞(0）回复(0）举报 2024-01-07

z4bn682m2#

此外，您可以使用null或任何评估false的值来禁用所有图例上的单击事件。

options: {
    legend: {
        onClick: null
    }
}

字符串
注意：在Chart.js（https://github.com/chartjs/Chart.js/blob/6bea15e7cf89003e3a5945a20cf1d2cc5096728e/src/plugins/plugin.legend.js#L481）中的以下代码中忽略onClick的点击事件

赞(0）回复(0）举报 2024-01-07

vyu0f0g13#

在撰写本文时（Chart.js v3.5.1），正确答案是

options: {
  plugins: {
    legend: {
      onClick: null
    }  
  }
}

字符串
根据上面Natan Almeida de Lima的评论，把它作为一个答案，因为我没有把它看作是一个单行评论，我只是在自己弄清楚之后才发现的。

赞(0）回复(0）举报 2024-01-07

4dc9hkyq4#

要覆盖单击图例项的默认行为，即在图表中显示/隐藏关联的数据集，您可以使用以下选项（为清晰起见，显示在options内）：

options: {
    legend: {
        onClick: function(event, legendItem) {}
    }
}

字符串
这是覆盖默认行为的方法，即提供一个具有相同参数的函数。（因此，立即返回），因为点击图例项时绝对不会发生任何事情。在docs中查找legend.onClick。虽然它目前只出现在两种图表类型下，此选项应该适用于所有图表类型。

赞(0）回复(0）举报 2024-01-07

l2osamch5#

对于Chart.js版本4.4.0，您可以使用以下解决方案：

options: {
  plugins: {
    legend: {
      onClick: (e) => e.native.stopPropagation()
    }  
  }
}

字符串
附加信息：由onClick触发的事件（在示例中：e）具有以下类型：ChartEvent。

赞(0）回复(0）举报 2024-01-07

btqmn9zl6#

您需要添加属性 legendItemClick 来覆盖默认操作。这对饼图很有用

legendItemClick: function(e){
                    console.log("Clicked an item with text: " + e.text);
                    e.preventDefault();
                }

字符串
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/events/legenditemclick

赞(0）回复(0）举报 2024-01-07

我来回答

jquery 如何禁用chartjs dclick

6条答案

相关问题

热门标签

最新问答