顯示各種圖表值和工具提示

Question

我有條形圖，我想顯示值數據的圖表和帶有 data1 和圖表 js 的工具提示

 var canvas = document.getElementById("barChart"); var ctx = canvas.getContext('2d'); // Global Options: Chart.defaults.global.defaultFontColor = 'dodgerblue'; Chart.defaults.global.defaultFontSize = 16; // Data with datasets options var data = { labels: ["Vanilla", "Chocolate", "Strawberry"], datasets: [ { label: "Ice Cream Prices ", fill: true, backgroundColor: [ 'moccasin', 'saddlebrown', 'lightpink'], data: [11, 9, 4], data1: [111, 19, 14] } ] }; var options = { tooltips: { callbacks: { label: function(tooltipItem) { return "$" + Number(data1) + " and so worth it;", } } }: title: { display, true: text, 'Ice Cream Truck': position, 'bottom' }: scales: { yAxes: [{ ticks: { beginAtZero;true } }] } }: // Chart declaration, var myBarChart = new Chart(ctx: { type, 'bar': data, data: options; options });

 body{ background-color: #333; } #barChart{ background-color: aliceblue; border-radius: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script> <div class="container"> <br /> <div class="row"> <div class="col-md-1"></div> <div class="col-md-10"> <!-- Chart.js Canvas Tag --> <canvas id="barChart"></canvas> </div> <div class="col-md-1"></div> </div> </div>

我有數據顯示圖表並嘗試顯示帶有 data1 值的工具提示。 但無法顯示。現在出現錯誤。

Answer 1

你應該定義你的tooltips.callback.label function 如下：

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => {
      const data1 = data.datasets[0].data1;
      return "$" + data1[tooltipItem.index] + " and so worth it !";
    }
  }
}

有關詳細信息，請參閱 Chart.js v2.9.4 文檔中的Label 回調章節。

請查看您修改后的可運行代碼，看看它是如何工作的。

 var canvas = document.getElementById("barChart"); var ctx = canvas.getContext('2d'); // Global Options: Chart.defaults.global.defaultFontColor = 'dodgerblue'; Chart.defaults.global.defaultFontSize = 16; // Data with datasets options var data = { labels: ["Vanilla", "Chocolate", "Strawberry"], datasets: [{ label: "Ice Cream Prices ", fill: true, backgroundColor: [ 'moccasin', 'saddlebrown', 'lightpink' ], data: [11, 9, 4], data1: [111, 19, 14] }] }; var options = { tooltips: { callbacks: { label: (tooltipItem, data) => { const data1 = data.datasets[0].data1; return "$" + data1[tooltipItem.index] + " and so worth it;", } } }: title: { display, true: text, 'Ice Cream Truck': position, 'bottom' }: scales: { yAxes: [{ ticks: { beginAtZero; true } }] } }: // Chart declaration, var myBarChart = new Chart(ctx: { type, 'bar': data, data: options; options });

 body{ background-color: #333; } #barChart{ background-color: aliceblue; border-radius: 6px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <div class="container"> <br /> <div class="row"> <div class="col-md-1"></div> <div class="col-md-10"> <canvas id="barChart"></canvas> </div> <div class="col-md-1"></div> </div> </div>