时间戳

首页 > 解决方案 > 显示各种图表值和工具提示

javascript - 显示各种图表值和工具提示

问题描述

我有条形图，我想显示值数据的图表和带有 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 值的工具提示。但无法显示。现在出现错误。

标签： javascripthtmljquerychart.js

解决方案

您应该tooltips.callback.label按如下方式定义您的函数：

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

有关更多信息，请参阅Chart.js v2.9.4 文档中的标签回调一章。

请查看您修改后的可运行代码，看看它是如何工作的。

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>

推荐阅读