Блог

Я должен отобразить шаблон с горизонтальной гистограммой без каких-либо осей.Я использую laravel 8 и Vuejs. Но до сих пор нет результата. Есть идеи, пожалуйста? Мой код: manager.blade.php

Внутри тегов шаблона:

  <tr v-for="arrMan in arrManagerList">                 
            <td>
                <div>
                    <strong>{{arrMan[0].first_name}} {{arrMan[0].last_name}}</strong>  
                </div>
            </td>  
            <td v-for="arr in arrMan"> 
                <div v-if="arr.count_finished_course != 0">                        
                    <div class="row">        
                        <bar-chart :options="options" :data="[['',arr.value_div]]" width="120px" 
                         height="70px"></bar-chart>
                        <div class="ml-4 mt-3" >
                            <strong>{{arr.count_finished_course}}/{{arr.count_assigned_course}} 
                           </strong>
                        </div>
                    </div>
                </div>                   
            </td>                
        </tr>
 

Внутри тега скрипта

       data() {
        return {
            arrManagerList: [],
            coursesList: [],
            principalsList: [],
            courseAssignedList: [],
            courseFinishedList: [],
            managersDashboardList: []
        }
    },
    options: {           
        scales: {
            xAxes: [{
              gridLines: {
                drawOnChartArea: false
              }
            }],
            yAxes: [{
              gridLines: {
                drawOnChartArea: false
              }
            }]
          },
    ......
   
}
 

Спасибо!

Похоже, данные параметров находятся не в нужном месте в файле сценария.

Он должен быть внутри поля данных. Вот пример, который генерирует эту диаграмму

 options: {
    legend: {
        display: false
    },
    scales: {
        yAxes: [
            {
                ticks: {
                    display: false // this will remove only the label
                },
                gridLines: {
                    display: false,
                    drawOnChartArea: false,
                    drawBorder: false
                }
            }
        ],
        xAxes: [
            {
                gridLines: {
                    display: false,
                    drawOnChartArea: false,
                    drawBorder: false
                }
            }
        ]
    }
}
 

ДЕМОНСТРАЦИЯ
Codepen
https://codepen.io/kunukn/pen/952b318beaf06a0da8106960547d5eb5

Codesandbox https://codesandbox.io/s/vuejs-vue-chartjs-ebrsk?file=/src/App.vue