Question

我使用asp.net core 2，我里面有API控制器，有方法以JSON格式返回数据。我使用Charts.js模板显示来自json的数据吗？我创建函数JavaScript来获取URL。但是将数据数组传递到图表时有问题吗？

var myChart2;
var Recent_Report_Months = [];
var Recent_Report_Price = [];
function myfunctionFetch() {

fetch(url)
    .then(checkStatus)
    .then((response) => response.json())
    .then((myJson) => {
        let output = '<h3>Summary</h3>';
        let ArryPrice = [];
        let ArryyMonths = [];

        Object.keys(myJson).forEach(function (st) {
            ArryPrice.push(myJson[st].price);
            ArryyMonths.push(myJson[st].bookingDate);

            Recent_Report_Months = ArryyMonths;
            Recent_Report_Price = ArryPrice;
        });
        //console.log(JSON.stringify(myJson) + " myclass");
        //console.log(Recent_Report_Months);
        //console.log(Recent_Report_Price);

        myChart2.data.labels = Recent_Report_Months;
        myChart2.data.datasets[0].data = Recent_Report_Price;
        myChart2.update();
        console.log(myChart2);
    })
    .catch((err) => { console.log('There was an error', err) });

//function check if status its ok ex:if url correct ..
function checkStatus(response) {
    if (response.ok) {
        return response;
    }
    let error = new Error(response.statusText);
    error.response = response;
    return Promise.reject(error);

    }
}//close function fetch

在此处传递数据时不知道数据，但是在使用concole.log在此处测试数据时

 // Recent Report 2
  var ctx = document.getElementById("recent-rep2-chart");

const bd_brandProduct2 = 'rgba(0,181,233,0.9)'
const bd_brandService2 = 'rgba(0,173,95,0.9)'
const brandProduct2 = 'rgba(0,181,233,0.2)'
const brandService2 = 'rgba(0,173,95,0.2)'
myfunctionFetch();

var data3 = [52, 60, 55, 50, 65, 80, 57, 70, 105, 115];
//var data4 = Recent_Report_Price;
//var data4 = [102, 70, 80, 100, 56, 53, 80, 75, 65, 90]


if (ctx) {
  ctx.height = 230;
   myChart2 = new Chart(ctx, {
    type: 'line',
    data: {
        labels: Recent_Report_Months,
      datasets: [
        {
          label: 'My First dataset',
          backgroundColor: brandService2,
          borderColor: bd_brandService2,
          pointHoverBackgroundColor: '#fff',
          borderWidth: 0,
          data: data3

        },
        {
          label: 'My Second dataset',
          backgroundColor: brandProduct2,
          borderColor: bd_brandProduct2,
          pointHoverBackgroundColor: '#fff',
          borderWidth: 0,
          data: Recent_Report_Price

        }
      ]
    },
    options: {
      maintainAspectRatio: true,
      legend: {
        display: false
      },
      responsive: true,
      scales: {
        xAxes: [{
          gridLines: {
            drawOnChartArea: true,
            color: '#f2f2f2'
          },
          ticks: {
            fontFamily: "Poppins",
            fontSize: 12
          }
        }],
        yAxes: [{
          ticks: {
            beginAtZero: true,
            maxTicksLimit: 5,
            stepSize: 50,
            max: 150,
            fontFamily: "Poppins",
            fontSize: 12
          },
          gridLines: {
            display: true,
            color: '#f2f2f2'

          }
        }]
      },
      elements: {
        point: {
          radius: 0,
          hitRadius: 10,
          hoverRadius: 4,
          hoverBorderWidth: 3
        },
        line: {
          tension: 0
        }
      }


    }
  });
}
 } catch (error) {
console.log(error);
  }

Answer 1

似乎您需要处理异步行为。尝试从checkStatus块内的if (response.ok)调用图表渲染功能

如何将Charts.js与JSON结合使用？

1 个答案: