Vue 中的 Chartjs 集成解析后的 Json 数据

Question

我在 Vue.js 中使用 Chart.js 构建图表时遇到了业余问题。 Chart.js 有效，我已经可以看到一个图表并且能够在命令行中记录数据（使用 console.log）。

chart-data.js

     type: 'line',
     data: {
       labels: ['Afghanistan', 'Somalia', 'Nigeria'],
       datasets: [
         { // one line graph
           label: 'Number of Moons',
           data: [300, 75, 468],
           backgroundColor: [
             'rgba(54,73,93,.5)', // Blue

           ],
           borderColor: [
             '#36495d',

           ],
           borderWidth: 3
         },
         { // another line graph
           label: 'Planet Mass (x1,000 km)',
           data: [4.8, 12.1, 12.7, 6.7, 139.8, 116.4, 50.7, 49.2],
           backgroundColor: [
             'rgba(71, 183,132,.5)', // Green
           ],
           borderColor: [
             '#47b784',
           ],
           borderWidth: 3
         }
       ]
     },
     options: {
       responsive: true,
       lineTension: 1,
       scales: {
         yAxes: [{
           ticks: {
             beginAtZero: true,
             padding: 25,
           }
         }]
       }
     }
   }
   
   export default planetChartData;

解析已经有效，但我正在努力将我的数组（labelNation，numOfNationals）放入变量 planetChartData。

json-parse.js

 const file = fs.readFileSync('./data.json', 'utf8')
 const test = JSON.parse(file)
 
 let nationality = [];
 for (let i = 0; i < test.length; i++) {
     nationality.push(test[i].nationality)
 }
 
 const labelNation = Array.from(new Set(nationality));
 
 let numOfNationals = [];
 
 for (let i = 0; i < labelNation.length; i++) {
     numOfNationals.push(nationality.filter(nat => nat === labelNation[i]).length)
 }

vue.js （在脚本标签中）

  const Chart = require('chart.js');
  import planetChartData from './chart-data.js';
  
  export default {
    name: 'App',
    components: {
    },
    data() {
      return {
        planetChartData: planetChartData,
      }
    },
    mounted() {
      this.createChart('planet-chart', this.planetChartData);
    },
    methods: {
      createChart(chartId, chartData) {
        const ctx = document.getElementById(chartId);
        const myChart = new Chart(ctx, {
          type: chartData.type,
          data: chartData.data,
          options: chartData.options,
        });
      }
  }
  }

非常感谢您的帮助！

Answer 1

你可以试试这个：

const Chart = require('chart.js');
  import planetChartData from './chart-data.js';
  
  export default {
    name: 'App',
    components: {
    },
    data() {
      return {
        planetChartData: planetChartData,
      }
    },
    mounted() { //                     vvv use spread operator here below
      this.createChart('planet-chart', ...this.planetChartData);
    },
    methods: {
      createChart(chartId, chartData) {
        const ctx = document.getElementById(chartId);
        const myChart = new Chart(ctx, {
          type: chartData.type,
          data: chartData.data,
          options: chartData.options,
        });
      }
  }
  }

并且您的 chart-data.js 应该看起来像这样，以便进行体面的导出： 我正在初始化一个 const 以声明 planetChartData

const planetChartData = {
  type: "line",
  data: {
    labels: ["Afghanistan", "Somalia", "Nigeria"],
    datasets: [
      {
        // one line graph
        label: "Number of Moons",
        data: [300, 75, 468],
        backgroundColor: [
          "rgba(54,73,93,.5)" // Blue
        ],
        borderColor: ["#36495d"],
        borderWidth: 3
      },
      {
        // another line graph
        label: "Planet Mass (x1,000 km)",
        data: [4.8, 12.1, 12.7, 6.7, 139.8, 116.4, 50.7, 49.2],
        backgroundColor: [
          "rgba(71, 183,132,.5)" // Green
        ],
        borderColor: ["#47b784"],
        borderWidth: 3
      }
    ]
  },
  options: {
    responsive: true,
    lineTension: 1,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            padding: 25
          }
        }
      ]
    }
  }
};

export default planetChartData;