色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

使用chart.js v2刪除圖表上的圖例

CSS
錢瀠龍2年前13瀏覽0評論

我正在用，Bootstrap，JQuery和Chart.js (v2)做一個主頁。我的實現使用的是v1，但最近才進入Bower，用它下載了v2。

我正在制作一個4列的網格，每列包含一個餅圖，但是v2中的縮放對我來說有點混亂。我希望圖表能夠快速響應，以便能夠與平板電腦和智能手機等較小的設備一起適當縮放，我的一個問題是，當鼠標懸停在圖表的部分上時，如何去除圖表的圖例以及懸停信息。

index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

函數. js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

如果我刪除了空的“標簽”字段，圖表就不再工作了。從表面上看，在圖表的頂部有一個很小的間隔，這可能表明標題是寫的，但它們只是空字符串。

有人知道如何刪除圖例和懸停描述嗎？我簡直搞不懂這是怎么用的

我一有時間就會去拉小提琴！

編輯:鏈接到文件:https://nnnick.github.io/Chart.js/docs-v2/#getting-started

創建新的圖表對象時，可以將options對象添加到圖表中。

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});

圖例、標題和工具提示名稱空間從options移動到options.plugins。

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
        plugins: {
            legend: {
                display: false
            },
        }
    }
});

您可以在javascript文件中使用Chart.defaults.global來更改默認選項。所以你想改變圖例和工具提示選項。

移除圖例

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

移除工具提示

Chart.defaults.global.tooltips.enabled = false;

這是一個工作的小提琴手。

修改一山的回答

如果你像我一樣使用react，

const data = {
...
}

const options = {
  plugins: {
    legend: {
      display: false,
    },
  },
};


<Bar data={data} options={options} />

對我來說，這不起作用:

圖例:{ display: false }

但這很好，謝謝你。

插件:{ 圖例:{ 顯示:假， }, }

你只需要添加這一行 圖例:{ 顯示:假 }

如果您使用的是chartjs版本2.x 然后簡單地補充道:

legend: {
  display: false,
},

但是如果您使用的是chart . js 3 . x版或更高版本，那么所有這些屬性都被移到元素中，所以只需在那里添加即可

elements: {
  line: {
    borderWidth: 0.4,
  },
  point: {
    radius: 0,
    hitRadius: 10,
    hoverRadius: 4,
    hoverBorderWidth: 3,
  },
  legend: {
    display: false,
  }
},