Question

是否有办法可以禁用Chart JS图表上的一个数据集上的工具提示，并将工具提示保留在其他数据集上。这是我目前的代码：

var data = {
                    labels: [' . $labels . '],
                    datasets: [
                        {
                            label: "Portfolio Performance",
                            fillColor: "rgba(0,0,220,0.2)",
                            strokeColor: "rgba(0,220,220,1)",
                            pointColor: "rgba(0,0,0,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: [' . $values . ']
                        },
                        {
                            label: "Portfolio Expendature",
                            fillColor: "rgba(0,0,220,0)",
                            strokeColor: "rgba(0,0,0,1)",
                            pointColor: "rgba(0,0,0,0)",
                            pointStrokeColor: "rgba(0,0,220,0)",
                            pointHighlightFill: "rgba(0,0,220,0)",
                            pointHighlightStroke: "rgba(220,220,220,0)",
                           data: [4450000,4450000,4450000,4450000,4450000]
                        }
                    ]
                };
                var option = {
                    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%=  \'£\' + FormatNumberBy3(Number(value).toFixed(2), \'.\' , \',\')  %>",

                    maintainAspectRatio: false, 
                    bezierCurve: false,
                    responsive: true,
                    scaleLabel: "<%= \'£\' + FormatNumberBy3(Number(value), \'.\' , \',\') %>"
                };

                var ctx = document.getElementById("graph").getContext("2d");
                var myLineChart = new Chart(ctx).Line(data, option);

Answer 1

您可以使用自定义工具提示执行此操作（基本上您使用HTML元素而不是使用画布单独渲染工具提示）。有关折线图的示例，请参阅https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html。

在您的情况下，您可以在https://github.com/nnnick/Chart.js/blob/v1.0.2/samples/line-customTooltips.html#L68调整循环，以根据需要排除/包含数据集。

Answer 2

我使用自定义工具提示配置来实现此目的（此处隐藏的数据集没有＆＃34;收入＆＃34;标签）：

this.myChart = new Chart(this.ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                    label: "Income",
                    data: data3
                },
                {
                    label: "Tax",
                    data: data1,
                    backgroundColor: "#3EAFD5"
                },
                {
                    label: "Expenses",
                    data: data2,
                    backgroundColor: "#D24B47"
                }
            ]
        },
        options: {
            responsive: true,
            tooltips: {
                custom: function(tooltipModel) {
                    if (tooltipModel.body && tooltipModel.body[0].lines && tooltipModel.body[0].lines[0].indexOf("Income") == -1) {
                        tooltipModel.opacity = 0;
                    }
                }
            }
        }
    }

仅在一个数据集上禁用chartJS工具提示

2 个答案: