Вопросы Теги

Проблемы с набором искровых данных

В vue-chartjs второй аргумент renderChart() представляет собой конфигурацию config для диаграммы, которая может содержать свойства scales.xAxes и scales.yAxes для установки цвета осей (т.е. , сетка): 

this.renderChart( /* data */ , {
  scales: {
    xAxes: [{
      display: true,
      gridLines: {
        display: true,
        color: '#eee'
      },
    }],
    yAxes: [{
      display: true,
      gridLines: {
        display: true,
        color: '#eee'
      },
    }]
  }
})


Vue.component('line-chart', {
  extends: VueChartJs.Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ],
    }, {
      responsive: true, maintainAspectRatio: false,
      scales: {
        xAxes: [{
          display: true,
          gridLines: {
            display: true,
            color: '#444'
          },
        }],
        yAxes: [{
          display: true,
          gridLines: {
            display: true,
            color: '#444'
          },
        }]
      }
    })
  }
  
})

new Vue({
  el: '.app',
})
.app {
  background-image: radial-gradient(#2e3f61, #131b29);
}

1
задан Alex100 18 January 2019 в 20:15
поделиться