如何在Chart.js v3中显示标签沿着线条？

vcudknz3 于 2023-01-20 发布在 Chart.js

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

下面是我的代码：

<!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>

并显示以下内容：

我想在每行的末尾显示Line1和Line2。

chart.js

来源：https://stackoverflow.com/questions/75180447/how-do-i-show-labels-along-with-lines-in-chart-js-v3

1条答案

按热度按时间

kcwpcxri1#

- 更新**添加属性clip: false,，以便标签在图表区域（link to the documentation）外可见
- 开箱即用据我所知，这是不可能的，但您可以使用chart.js插件**，如https://www.chartjs.org/chartjs-plugin-annotation/2.0.0/
- 这里有一个演示，我将如何做到这一点：**
（您必须调整标签的位置，请查看文档获取详细信息）*

const data = {
    labels: [1,2,3,4,5], 
    datasets: [{
        label: 'line-1',
        borderColor: '#36A2EB',
        backgroundColor: '#36A2EB',
        data: [50, 150, 180, 160, 100],
     },{
        label: 'line-2',
        borderColor: '#FF6384',
        backgroundColor: '#FF6384',
        data: [20, 110, 80, 190, 20],
     }
    ],
};

const config = {
     type: 'line',
    data: data,
    options: {
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'right',
            },
        
            annotation: {
              clip: false, // <-- Adding this property you can draw outside of the chart area
              annotations: {
                // Create them static
                label1: {
                  type: 'label',
                  xValue: 2,
                  yValue: 100,
                  backgroundColor: '#ffffff',
                  color: 'red',
                  content: ['static label'],
                
              }
            }
         }
      }
    }
};

// create them dynamic
data.datasets.forEach((item, index) => {
     config.options.plugins.annotation.annotations[item.label] = {
         type: 'label',
         xValue: data.labels.length-1.5,
         yValue: item.data[item.data.length-1],
         backgroundColor: '#ffffff',
         color: item.borderColor,
         content: [item.label],
         textAlign: 'start'
     }; 
})

new Chart(
    document.getElementById('chart'),
    config
);

<script src="//cdn.jsdelivr.net/npm/chart.js"></script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.1.2/chartjs-plugin-annotation.min.js"></script>

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

在这个演示中，我还展示了如何使用这个forEach循环，用图表中的数据动态地创建标签。这只是一个演示，需要一些调整。

data.datasets.forEach((item, index) => {
   config.options.plugins.annotation.annotations[item.label] = {
     type: 'label',
     xValue: data.labels.length-1.5,
     yValue: item.data[item.data.length-1],
     backgroundColor: '#ffffff',
     color: item.borderColor,
     content: [item.label],
     textAlign: 'start'
   }; 
})

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

我来回答

如何在Chart.js v3中显示标签沿着线条？

1条答案

相关问题

热门标签

最新问答