为不同的数据图表创建不同的标签js

Question

我正在尝试为不同的数据创建不同的标签

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

  type: 'bar',
  data: {
    labels:['total','profit','income'],
    datasets: [{
        label: 'total price',
        data: [1000],
        backgroundColor:backgroundColorPrice,
        borderColor:borderColorPrice,
        borderWidth,
        fill
      },
      {
        label: 'total profit',
        data: [900],
        backgroundColor:backgroundColorProfit,
        borderColor:borderColorProfit,
        borderWidth,
        fill
      },  
      {
        label: 'total income',
        data: [1300],
        backgroundColor:backgroundColorIncome,
        borderColor:borderColorIncome,
        borderWidth,
        fill
      },             
    ]
},
  options: {
    tooltips: {
      mode: 'index',
      intersect: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<p class="mt-3 mx-auto md:text-2xl text-center  pb-3 ">charts</p>

<canvas id="myChart" width="400" height="400"></canvas>

我试图将每个 labels 赋予每个数据，例如：总价格的总标签和总利润的利润标签等？！请问可以吗谢谢

Answer 1

这是你想要的吗？

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

  type: 'bar',
  data: {
    labels:['total','profit','income'],
    datasets: [{
        label: 'total price',
        data: [1000,0,0],
        backgroundColor:"red",
        borderColor:"red",
      },
      {
        label: 'total profit',
        data: [0,900,0],
        backgroundColor:"blue",
        borderColor:"red",
      },  
      {
        label: 'total income',
        data: [0,0,1300],
        backgroundColor:"green",
        borderColor:"red",
      },             
    ]
},
  options: {
    tooltips: {
      mode: 'index',
      intersect: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<p class="mt-3 mx-auto md:text-2xl text-center  pb-3 ">charts</p>

<canvas id="myChart" width="400" height="400"></canvas>

Answer 2

扩展 ikhvjs 答案，如果您将 tooltip 模式设置为 point，它只会显示您当前悬停的栏的工具提示，因此不会显示零值：

var ctx = document.getElementById('myChart');

var myChart = new Chart(ctx, {

  type: 'bar',
  data: {
    labels: ['total', 'profit', 'income'],
    datasets: [{
        label: 'total price',
        data: [1000, 0, 0],
        backgroundColor: "red",
        borderColor: "red",
      },
      {
        label: 'total profit',
        data: [0, 900, 0],
        backgroundColor: "blue",
        borderColor: "red",
      },
      {
        label: 'total income',
        data: [0, 0, 1300],
        backgroundColor: "green",
        borderColor: "red",
      },
    ]
  },
  options: {
    plugins: {
      tooltip: {
        mode: 'point',
        intersect: false
      },
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<p class="mt-3 mx-auto md:text-2xl text-center  pb-3 ">charts</p>

<canvas id="myChart" width="400" height="400"></canvas>

为不同的数据图表创建不同的标签js

create different labels for different data chart js

javascript

charts

chart.js