在Chartjs中隐藏图例

时间:2017-03-29 09:03:29

标签: chart.js

我想在标签和工具提示中隐藏Chart.js中的图例。

我正在使用v2.5.0

我正在尝试这种方式,但它没有在工具提示中隐藏传奇

<canvas id="myChart" width="400" height="250"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script>
window.onload = function(e){ 
    var ctx = document.getElementById("myChart").getContext("2d");
    var data = {
        labels: ["January", "February", "March", "April", "May", "June1", "July"],
        datasets: [
            {
                fill: false,
                lineTension: 0.3,
                pointRadius: 15,
                pointHitRadius: 15,
                pointHoverRadius: 15,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    };  
    var options={
        legend: {
            display: false
        },
        tooltips: {
            callbacks: {
               label: function(tooltipItem, data) {
                      return tooltipItem.yLabel;
               }
            }
        }
    };
    var myLineChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: options
    });
}
</script>

jsfiddle

我也尝试过像这样的全球价值观

    Chart.defaults.global.legend= false;

但传说仍显示在工具提示中,请参阅并建议任何可能的方法来执行此操作。

由于

1 个答案:

答案 0 :(得分:0)

我通过在工具提示选项中添加displayColors:false来找到解决方案,就像这样

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

现在没有显示图例,我希望它可以帮助有类似问题的人。