如何在Chart.js v3中显示每行的标签?

vawmfj5a  于 2023-01-20  发布在  Chart.js
关注(0)|答案(2)|浏览(184)

就像这个:

datasets中的label属性不起作用,不显示任何内容:

datasets: [{
                    label: 'Line 1',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2
                },
                {
                    label: 'Line 2',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 2
                }]
            },

完整的代码如下所示:

<!DOCTYPE html>
<html>
<head>
    <title> Example</title>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.1/chart.min.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'Line 1',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 2
                },
                {
                    label: 'Line 2',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    backgroundColor: 'rgba(153, 102, 255, 0.2)',
                    borderColor: 'rgba(153, 102, 255, 1)',
                    borderWidth: 2
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                legend: {
                    display: false
                }
            }
        });
    </script>
</body>
</html>
c90pui9n

c90pui9n1#

对于静态标签,您需要添加"动画"键,如

import {
  Chart,
  Sample
} from "chart.js";
import {
  map
} from "lodash";
import {
  data
} from "../data";

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

const d = map(data, (data, index) => {
  return {
    data: [data],
    backgroundColor: "blue",
    pointRadius: 2,
    fill: "start"
  };
});

const dd = map(data, data => {
  return data.y;
});

console.log(dd);

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
        label: 'Line 1',
        data: [6, 59, 80, 81, 56, 55, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 2
      },
      {
        label: 'Line 2',
        data: [5, 20, 40, 19, 86, 27, 90],
        backgroundColor: 'rgba(153, 102, 255, 0.2)',
        borderColor: 'rgba(153, 102, 255, 1)',
        borderWidth: 2
      }
    ]
  },
  options: {
    animation: {
      onComplete: function() {
        const chartInstance = this.chart,
          ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(
          18,
          Chart.defaults.global.defaultFontStyle,
          Chart.defaults.global.defaultFontFamily
        );
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";

        this.data.datasets.forEach(function(dataset, i) {
          const meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            const data = dataset.data[index];
            ctx.fillStyle = "#000";
            ctx.fillText(data, bar._model.x, bar._model.y - 2);
          });
        });
      }
    },
    tooltips: {
      enabled: true
    },

    scales: {
      y: {
        beginAtZero: true
      }
    },
    legend: {
      display: false
    }
  }
});

祝你好运!

px9o7tmv

px9o7tmv2#

如果像https://www.chartjs.org/chartjs-plugin-annotation/2.0.0/这样的插件不能解决问题 Check out this answer for a demo,我会编写自己的特定插件,在渲染完成后绘制图表***(参见下面的演示了解详细信息)***。
为了保存,我会在图表的右侧添加一些填充,以防止截断,就像演示中所做的那样(link to the documentation)。

    • 这里是一个演示,如何一个非常基本的插件可以喜欢:**
  • (问题中的图表数据)*
var miniLabelPlugin = {
    id: 'miniLabelPlugin',
    afterRender: function(chart, args, options) {
        const { ctx } = chart;

        chart.config.data.datasets.forEach((dataSet, index) => {
            let lastPoint = chart.getDatasetMeta(index).data[chart.getDatasetMeta(index).data.length - 1];
            let lastValue = dataSet.data[dataSet.data.length -1]
            console.info(dataSet.data, lastPoint)

            ctx.fillStyle = options.textColor;
            ctx.font = options.font;
            ctx.fillText(`${lastValue}`, lastPoint.x + options.paddingLeft, lastPoint.y);
        });
    },
    defaults: { 
       paddingLeft: 10,
       font:  "10px Arial",
       textColor: "black"
    }
}

const config ={
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Line 1',
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 2
        },
        {
            label: 'Line 2',
            data: [28, 48, 40, 19, 86, 27, 90],
            backgroundColor: 'rgba(153, 102, 255, 0.2)',
            borderColor: 'rgba(153, 102, 255, 1)',
            borderWidth: 2
        }]
    },
    // here the plugin is added to the chart
    plugins: [miniLabelPlugin], 
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        plugins:{
            legend: {
                display: false
            },
        },
        layout: {
            padding: {
                right: 50
            }
        }
    }
};

new Chart(
    document.getElementById('chart'),
    config
);
<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  

<div class="chart" style="height:184px; width:350px;">
    <canvas  id="chart" ></canvas>
</div>

相关问题