图表js静态图表-如何

Question

嗨，这是一张画布，我用它作为卡片的a地

只是希望它是静态的，没有悬停，工具提示或标签，或任何传奇只是线条图与其背景颜色作为静态图表。

如果有人能帮上忙，{易于禁用所有这些选项。你会很感激的。

 <canvas class = "w-100" id="myChartfill" >
                <script>
                    chartData4 = 
                    {
                        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
                    datasets: [{
                   
                    data: [10, 59, 80, 81, 56, 55, 40],
                    fill: true,
                    backgroundColor: 'rgb(75, 192, 192)',
                    tension: 0.1,
                 
                    }]
                    }
                    ;
                    const myChartfill = document.getElementById('myChartfill');
                    
                    if(myChartfill!=null){
                    new Chart(myChartfill, {
                      type: 'line',
                    data: chartData4,
                    options: {
                        
    

                  }
                    }
                    )}
                  
                  
                  </script>


            </canvas>

Answer 1

使用画布外部的脚本

chartData4 = 
    {    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
         datasets: [{
             data: [10, 59, 80, 81, 56, 55, 40],
             fill: true,
             backgroundColor: 'rgb(75, 192, 192)',
             tension: 0.1,
         }]
    };
    const myChartfill = document.getElementById('myChartfill');
     
    if(myChartfill!=null){
        new Chart(myChartfill, {
            type: 'line',
            data: chartData4,
                options: { 
                            events: [],
                            plugins: { tooltip: { enabled: false} ,
                            legend: {
                            display: false},
                            
                                    },
                                    scales: {
                                         y: {
                                            ticks: {
                                             display: false,
                                          },
                                          grid: {
                                          display: false,
                                          },
                                        },
                                         x: {
                                            ticks: {
                                             display: false,
                                          },
                                          grid: {
                                          display: false,
                                          },
                                          },
                                            },

                        },
    )}

    .container {
      display: flex;
        width: 100%;
       height: 50vh;
    }

<div class="container">
    <canvas class = "w-100" id="myChartfill"></canvas>
</div>

Answer 2

options: {
    tooltips: {
      enabled: false,
    },
    legend: {
      display: false
    },
    scales: {
      xAxes: [{display: false}],
      yAxes: [{display: false}],
    }
  }