Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { HorizontalBar } from 'vue-chartjs'
- import Chart from 'chartjs-plugin-datalabels'
- export default {
- name: 'diagram',
- extends: HorizontalBar,
- data: () => ({
- chartData: '',
- score: {},
- value: [],
- keys: [],
- options: {
- scales: {
- xAxes: [{
- ticks: {
- //beginAtZero: true
- // barThickness: 150,
- //barPercentage: 0.5
- }
- }],
- yAxes: [{
- ticks: {
- beginAtZero: true,
- // barPercentage: 0.5,
- //barThickness: 150,
- mirror: true
- }
- }]
- },
- responsive: true,
- /*legend: {
- display: false,
- },
- */
- },
- responsive: true,
- maintainAspectRatio: false
- }),
- created () {
- // Overwriting base render method with actual data.
- this.$http({
- method: 'get',
- url: this.base_url + '/exam/api/score/' + this.$store.state.user.id + '/',
- auth: {
- username: 'l360_mobile_app',
- password: 'itsd321#'
- },
- }).then(res => {
- console.log(res);
- if (res.status == '200') {
- console.log(res.data);
- this.score = res.data;
- for (let v in this.score) {
- this.value.push(this.score[v]);
- }
- for (let key in this.score) {
- this.keys.push(key);
- }
- console.log(this.keys);
- console.log(this.value);
- }
- });
- this.fillData()
- },
- mounted(){
- /* this.addPlugin({
- id: 'my-plugin',
- beforeInit: function (chart) {
- }
- });
- */
- this.renderChart(this.chartData, this.options);
- },
- methods: {
- fillData () {
- this.chartData = {
- labels: this.keys,
- datasets: [
- {
- fillColor: "#ffecbf",
- strokeColor: "#dacdd2",
- //backgroundColor: '#f87979',
- data: this.value,
- }
- ],
- }
- }
- },
- watch: {
- data: function () {
- this._chart.destroy();
- this.renderChart(this.chartData, this.options);
- },
- },
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement