ChartJS 图表将工具提示更改为仅显示R轴

r1zk6ea1 于 2023-03-02 发布在 Chart.js

关注(0)|答案(1)|浏览(214)

你好，我有一个问题的工具提示信息显示在我的气泡图。我似乎不能得到工具提示内的选项更改。
此时，它显示“公司1（36，192，22.13）”。但是，我希望它显示“公司1（22.13）百万”

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>
<style>
#myChart {
  width: 400px;
  height: 400px;
}
</style>
<script>

  
var data = {
  datasets: [
    
    { 
label: ' company 1 ', 
data: [ 
{ x: 36 ,y: 192 ,r: 22.13 }, 
], 
 backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
 borderColor: 'rgba( 255, 99, 132, 1  )', 
 },
{ 
label: ' company 2 ', 
data: [ 
{ x: 31 ,y: 161 ,r: 14.69 }, 
], 
 backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
 borderColor: 'rgba( 255, 99, 132, 1  )', 
 },
{ 
label: ' company 3 ', 
data: [ 
{ x: 33 ,y: 106 ,r: 9.08 }, 
], 
 backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
 borderColor: 'rgba( 255, 99, 132, 1  )', 
 },
{ 
label: ' company 4 ', 
data: [ 
{ x: 34 ,y: 97 ,r: 3.62 }, 
], 
 backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
 borderColor: 'rgba( 255, 99, 132, 1  )', 
 },
{ 
label: ' company 5 ', 
data: [ 
{ x: 27 ,y: 91 ,r: 9.67 }, 
], 
 backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
 borderColor: 'rgba( 255, 99, 132, 1  )', 
 }
       
  ]
};

// Chart options
var options = {
  scales: {
    x: {
      min: 0,
      max: 50,
      title: {
        display: true,
        text: 'market growth'
      }
    },
    y: {
      min: 0,
      max: 210,
      title: {
        display: true,
        text: 'Sales'
      }
    }
  },
  plugins: {
    legend: {
                display: false
            },
    title: {
      display: true,
      text: 'test1'
    }
  }
  
};

// Create the chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bubble',
  data: data,
  options: options
});
</script>

任何指导如何去做这将是感激的，我找不到任何以前的问题是相关的足够

chart.js

来源：https://stackoverflow.com/questions/75583012/chartjs-changing-the-tooltip-to-display-the-r-axis-only

1条答案

按热度按时间

9jyewag01#

您可以在选项的工具提示部分配置自定义回调：

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1"></script>
<canvas id="myChart"></canvas>
<style>
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<script>
  var data = {
    datasets: [

      {
        label: ' company 1 ',
        data: [{
          x: 36,
          y: 192,
          r: 22.13
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      },
      {
        label: ' company 2 ',
        data: [{
          x: 31,
          y: 161,
          r: 14.69
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      },
      {
        label: ' company 3 ',
        data: [{
          x: 33,
          y: 106,
          r: 9.08
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      },
      {
        label: ' company 4 ',
        data: [{
          x: 34,
          y: 97,
          r: 3.62
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      },
      {
        label: ' company 5 ',
        data: [{
          x: 27,
          y: 91,
          r: 9.67
        }, ],
        backgroundColor: 'rgba( 255, 99, 132, 0.6 )',
        borderColor: 'rgba( 255, 99, 132, 1  )',
      }

    ]
  };

  // Chart options
  var options = {
    scales: {
      x: {
        min: 0,
        max: 50,
        title: {
          display: true,
          text: 'market growth'
        }
      },
      y: {
        min: 0,
        max: 210,
        title: {
          display: true,
          text: 'Sales'
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: (ttItem) => `${ttItem.dataset.label} (${ttItem.raw.r}) Million`
        }
      },
      legend: {
        display: false
      }
    }
  };

  // Create the chart
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bubble',
    data: data,
    options: options
  });
</script>

赞(0）回复(0）举报 2023-03-02

我来回答

ChartJS 图表将工具提示更改为仅显示R轴

1条答案

相关问题

热门标签

最新问答