如何删除 CanvasJS 中的工具提示和数据集？

Question

我使用 CanvasJS。每当图表包含多个数据系列时，建议在图例中表示每个数据系列（在 jsfiddel ANS1 中，ANS2 是图例名称）并将鼠标悬停在数据点或数据系列上，会出现一个工具提示，其中包含有关数据点和数据系列的信息。当我每次单击图例时，然后隐藏数据集并删除图形栏，但不在悬停工具提示上。

1.第一张图片是正确的，因为 2 个工具提示和 2 个数据集

当我点击 ANC1 时它会隐藏，但工具提示仍然显示。

2。第二张图片不正确，因为仍然有 2 个工具提示和 1 个数据集

我的代码在 jsfiddle

var chart = new CanvasJS.Chart("chartContainer",
    {
        title:{
            text: "title"
        },
        axisX:{
            title: "xxxxxxxxxx",
            labelAngle: 135,
            labelFontSize: 23
        },
        axisY:{
            title:"Number of Services"
        },
        axisY2: {
            title: "Number of Eligible Couple",
            titleFontSize: 25,
        },
        toolTip: {
            enabled: true,
            shared: true    },
        animationEnabled: true,
        legend:{
            horizontalAlign: "center", // left, center ,right 
            verticalAlign: "top",  // top, center, bottom  
            cursor:"pointer",
            itemclick: function(e) {
                if (typeof (e.dataSeries.visible) ===  "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                }
                else
                {
                    e.dataSeries.visible = true;
                }
                chart.render();
            }
        },
        data: [
            {
                type: "column",
                name: "ANC1",
                showInLegend: "true",
                visible: true,
                dataPoints: [{label:"ROY2",x:0,y:36},{label:"ROY3",x:1,y:36}]
            },
            {
                type: "column",
                name: "ANC2",
                showInLegend: "true",
                visible: true,
                dataPoints: [{label:"ROY2",x:0,y:56},{label:"ROY3",x:1,y:36}]
            }
        ]
    });
chart.render();

Answer 1

您可以设置自定义工具提示https://canvasjs.com/docs/charts/chart-options/tooltip/content-formatter/

您的案例代码：

var chart = new CanvasJS.Chart("chartContainer",
{
    toolTip: {
        enabled: true,
        shared: true,
        contentFormatter: function(e){
            var str = "";
            for (var i = 0; i < e.entries.length; i++){
                if(e.entries[i].dataSeries.visible){
                    var temp = (e.entries[i].dataSeries.name + ': '+ e.entries[i].dataPoint.y);
                    str = str.concat(temp, '<br>');
                }
            };
            return (str);
          }
        },
    ...

如何删除 CanvasJS 中的工具提示和数据集？

how to remove tooltip and dataset in CanvasJS?

javascript

jquery

charts

canvas

canvasjs