如何在chart.js中添加标签？

w8ntj3qf 于 2023-04-20 发布在 Chart.js

关注(0)|答案(2)|浏览(229)

我试图在Webflow上制作一个带有图表标签的chart.js。也许是从chart.js下载插件的问题？我可以看到在https://www.w3schools.com/js/tryit.asp?filename=tryjs_default中也不起作用。
Chart.js示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
  <style>

.chartjs-title {
  font-family: Roboto;
}

#inputValue {
  width: 200px;
  height: 100px;
  font-size: 20px;
}

#inputContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

const chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: \['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'\],
    datasets: \[{
      data: \[12, 19, 3, 5, 2, 3\],
      borderWidth: 1
    }\]
  },
  options: {
    plugins: {
      legend: {
        display: false
      },
      datalabels: { 
        anchor: 'end',
        align: 'top',
        offset: -6,
        font: {
          family: 'Roboto',
          size: 16
        },
        formatter: function(value, context) {
          return value.toLocaleString('pl-PL', {style: 'currency', currency: 'PLN'}).replace('PLN', 'zł');
        }
      }
    },
    indexAxis: 'y',
    scales: {
      x: {
        ticks: {
          fontFamily: 'Roboto',
          callback: function(value, index, values) {
            return value.toLocaleString('pl-PL', {style: 'currency', currency: 'PLN'}).replace('PLN', 'zł');
          }
        },
        grid: {
          display: false
        }
      },
      y: {
        ticks: {
          fontFamily: 'Roboto',
          anchor: 'end'
        },
        grid: {
          display: false
        }
      }
    }
  }
});

const input = document.getElementById('inputValue');
input.addEventListener('input', () =\> {
  chart.data.datasets\[0\].data = \[
    input.value \* 0.8 + 10,
    input.value \* 0.9 + 10,
    input.value \* 2 + 10,
    input.value \* 3 + 10,
    input.value \* 4 + 10,
    input.value \* 10 + 10
  \];
  chart.update();
});

我试图添加标签到图表不是datalabels像数字，但像红色，蓝色，橙子...在webflow你只能添加嵌入代码容器，所以我想知道如果这是我想实现的是possible：C

chart.js

来源：https://stackoverflow.com/questions/76015366/how-to-add-labels-into-the-chart-js

2条答案

按热度按时间

wmvff8tz1#

我认为你在<style>元素中添加了javascript。
对于数据标签，您必须注册插件，请参阅https://stackoverflow.com/a/75996303/2057925

赞(0）回复(0）举报 2023-04-20

hivapdat2#

所以，是的，它工作了，谢谢你，这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
  <style>
    .chartjs-title {
      font-family: Roboto;
    }

    #inputValue {
      width: 200px;
      height: 100px;
      font-size: 20px;
    }

    #inputContainer {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div>
    <canvas id="myChart" style="background-color: transparent;"></canvas>
    <div id="inputContainer">
      <input type="number" id="inputValue" min="0" placeholder="Wprowadź liczbę">
    </div>
  </div>

  <script>
    // Register the plugin to the Chart.js library
    Chart.register(ChartDataLabels);

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

    const chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        plugins: {
          datalabels: {
            color: 'white',
            anchor: 'end',
            align: 'start',
            offset: -6,
            font: {
              weight: 'bold',
              size: '14'
            },
            formatter: function(value, context) {
              return value.toLocaleString('pl-PL', {style: 'currency', currency: 'PLN'}).replace('PLN', 'zł');
            }
          }
        },
        indexAxis: 'y',
        scales: {
          x: {
            ticks: {
              fontFamily: 'Roboto',
              callback: function(value, index, values) {
                return value.toLocaleString('pl-PL', {style: 'currency', currency: 'PLN'}).replace('PLN', 'zł');
              }
            },
            grid: {
              display: false
            }
          },
          y: {
            ticks: {
              fontFamily: 'Roboto',
              anchor: 'end'
            },
            grid: {
              display: false
            }
          }
        }
      }
    });

    const input = document.getElementById('inputValue');
    input.addEventListener('input', () => {
      chart.data.datasets[0].data = [
        input.value * 0.8 + 10,
        input.value * 0.9 + 10,
        input.value * 2 + 10,
        input.value * 3 + 10,
        input.value * 4 + 10,
        input.value * 10 + 10
      ];
      chart.update();
    });
  </script>
</body>
</html>

赞(0）回复(0）举报 2023-04-20

我来回答

如何在chart.js中添加标签？

2条答案

相关问题

热门标签

最新问答