Chart.js v2隐藏数据集标签

时间:2016-05-13 07:52:10

标签: chart.js chart.js2

我有以下代码使用Chart.js v2.1.3创建图表:

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

代码看起来很简单,但我无法从图表中删除标签。我尝试了很多在线发现的解决方案,但大多数都使用Chart.js v1.x。

如何删除数据集标签?

8 个答案:

答案 0 :(得分:163)

只需设置labeltooltip选项即可

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

小提琴 - http://jsfiddle.net/g19220r6/

答案 1 :(得分:22)

添加:

Chart.defaults.global.legend.display = false;

启动脚本代码;

答案 2 :(得分:17)

截至 2021 年,命名空间已从 options.legend 更改为 options.plugins.legend。这个简单的代码对我有用 -

data{
...
},
options: {
  plugins: {
    legend: {
      display: false
    }
  }
}

答案 3 :(得分:6)

您还可以通过删除“标题”将工具提示放在一行:

this.chart = new Chart(ctx, {
    type: this.props.horizontal ? 'horizontalBar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`, 
                title: () => null,
            }
        },
    },
});

enter image description here

答案 4 :(得分:2)

New Solution ChartJS v3.1.1

上述解决方案对于 v3.1 之前版本的图表 js 是正确的,对于 v3.1.1 使用以下内容

 ...
 options: {
  plugins:{
   legend: {
    display: false
   }
  }
 }

答案 5 :(得分:1)

用此代码段替换选项,将为 Vanilla JavaScript 开发人员修复

options: {
            title: {
                text: 'Hello',
                display: true
            },
            scales: {
                xAxes: [{
                    ticks: {
                        display: false
                    }
                }]
            },
            legend: {
                display: false
            }
        }

答案 6 :(得分:0)

就像添加以下内容一样简单: legend: { display: false, }

//或者,如果您愿意,也可以使用此其他选项:

Chart.defaults.global.legend.display = false;

答案 7 :(得分:0)

i_arr = np.array([0, 1, 1, 0, 0, 1, 0])
v_arr = np.array([1, 2, 3, 4, 5, 6, 7])

np.column_stack((1-i_arr, i_arr)) * v_arr[:,None]

Out[61]:
array([[1, 0],
       [0, 2],
       [0, 3],
       [4, 0],
       [5, 0],
       [0, 6],
       [7, 0]])