Jerry286 2024-06-05 09:03 采纳率: 50%
浏览 3
已结题

使用 chart.bundle.js 做曲线图的时候，想让部分曲线在显示的时候默认不显示。

使用 chart.bundle.js 做曲线图的时候，想让部分曲线在界面上不显示。让用户手动点上才显示。

如下图的曲线0和1一直保持显示，2、3、4保持不显示，需要用户点击label之后才显示。谢谢！

img

  • 写回答

2条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-06-05 09:03
    关注

    引自免费微信小程序：皆我百晓生

    为了实现这个需求，你需要在Chart.js的基础上进行一些定制。首先确保你已经包含了chart.bundle.js库，并且准备了HTML结构用于展示图表和标签。这里是一个详细的步骤指南以及示例代码：

    1. 创建HTML结构：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <div id="legend-container">
        <button onclick="toggleDataset(2)">Dataset 2</button>
        <button onclick="toggleDataset(3)">Dataset 3</button>
        <button onclick="toggleDataset(4)">Dataset 4</button>
    </div>
</body>
</html>
    1. 添加CSS样式（可选）：
    #legend-container {
    margin-top: 20px;
}
    1. 编写JavaScript代码：
    window.onload = function () {
    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: 'Dataset 0',
                    data: [100, 80, 60, 40, 20, 10],
                    borderColor: 'rgba(75, 192, 192, 1)',
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    fill: false,
                },
                {
                    label: 'Dataset 1',
                    data: [80, 60, 70, 50, 30, 20],
                    borderColor: 'rgba(255, 206, 86, 1)',
                    backgroundColor: 'rgba(255, 206, 86, 0.2)',
                    fill: false,
                },
                {
                    label: 'Dataset 2',
                    data: [40, 50, 60, 70, 80, 90],
                    borderColor: 'rgba(255, 99, 132, 1)',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    fill: false,
                    hidden: true,
                },
                {
                    label: 'Dataset 3',
                    data: [70, 80, 90, 100, 110, 120],
                    borderColor: 'rgba(54, 162, 235, 1)',
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    fill: false,
                    hidden: true,
                },
                {
                    label: 'Dataset 4',
                    data: [100, 110, 120, 130, 140, 150],
                    borderColor: 'rgba(255, 206, 86, 1)',
                    backgroundColor: 'rgba(255, 206, 86, 0.2)',
                    fill: false,
                    hidden: true,
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                position: 'top',
            },
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    // Toggle dataset visibility based on the button click
    function toggleDataset(datasetIndex) {
        if (myChart.data.datasets[datasetIndex].hidden) {
            myChart.data.datasets[datasetIndex].hidden = false;
        } else {
            myChart.data.datasets[datasetIndex].hidden = true;
        }

        myChart.update();
    }
};

    这段代码会创建一个线形图，其中 Dataset 0 和 Dataset 1 默认显示，而 Dataset 2 到 Dataset 4 初始时隐藏。当用户点击相应按钮时，对应的曲线将会显示或隐藏。

    注意：这个例子使用的是CDN上的Chart.js库，如果你有自己的服务器环境，建议将Chart.js下载到本地并引用本地文件路径。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 6月13日
  • 已采纳回答 6月5日
  • 创建了问题 6月5日