Question

我创建了一个辅助函数来解决我的chart.js。

首先，在我的index.html文件中，我放了ff：

   <div id="app"></div>
   <canvas id="myChart" width="400" height="400"></canvas>

接下来，为了调用chart.js，我创建了一个带有必要数据/参数的辅助函数：

export const chartUI = (labels, data) =>{
  var ctx = document.getElementById("myChart");

  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'RATES',
            data: data,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

};

现在在我的组件上，我需要将数据放在上面，我调用了函数，以便它可以操作和显示数据：

import React from 'react';
const helper = require('../../../helpers/utils')

const Chart = (props) => {
  return(
    <div>
       {props.info.map(item => {
          return <p>{helper.chartUI(item.time, item.rates)}</p>
       }) }
    </div>
  )
};

export default Chart;

当我运行此代码时，我没有在前端看到任何图表，而且我收到此错误：Uncaught TypeError: this.ticks.map is not a function The above error occurred in the <Chart> component: TypeError: this.ticks.map is not a function

PS。这是我从我的应用程序流出的类型数据：

{
    "rates": [
            {
                "time": "2018-04-13T15:45:19.5968204Z",
                "asset_id_quote": "$$$",
                "rate": 4000000
            },
            {
                "time": "2018-04-13T15:45:41.7725202Z",
                "asset_id_quote": "1ST",
                "rate": 37714.501225721289835941919668
            }
}

调用辅助函数并将数据传递给chart.js

0 个答案: