Question

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

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

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

2。第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中删除工具提示和数据集？

1 个答案: