图表.js；图表未显示时间和导入的数据。

Posted 2023-03-07

【中文标题】图表.js；图表未显示时间和导入的数据。

【英文标题】：Chart.js; Chart is not showing time and imported data.

【发布时间】：2017-11-23 15:01:33

【问题描述】：

我对编程非常陌生，尤其是 javascript。 为了学习 javascript，我正在考虑使用 coinmarketcap 的“代码数据”创建一个图表。为了获取代码数据，我创建了以下函数：

function golemPrice() 
    //Fetch data
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, "https://api.coinmarketcap.com/v1/ticker/golem-network-tokens/?convert=EUR");
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    $rawData = curl_exec($curl);
    curl_close($curl);

// decode to array
    $data = json_decode($rawData);

//Access array[0] and select value price_eur
    $gntPrice = $data[0]->price_eur;

// show data
    return $gntPrice;


?>

要将数据放入图表中，我正在考虑使用 chart.js。我创建了以下图表：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<script>
    let priceFromFunction = ["<?php golemPrice();?>"];
    let timeFormat = "MM/DD/YYYY HH:mm";
    let myChart = document.getElementById('golemChart').getContext('2d');
    let lineChart = new Chart(myChart, 
        type: 'line',
        data: 
            datasets: [
                label: 'Golem chart',

                borderColor: "rgba(80, 164, 245, 4)",
                data: priceFromFunction
            ]
        ,
        options: 
            scales: 
                xAxes: [
                    type: "time",
                    time: 
                        format: timeFormat,
                        // round: 'day'
                        tooltipFormat: 'll HH:mm'
                    ,
                    scaleLabel: 
                        display: true,
                        labelString: 'Date'
                    
                , ],
                yAxes: [
                    scaleLabel: 
                        display: true,
                        labelString: 'Price'
                    
                ]
            ,
        
    );
</script>

很遗憾，我的图表没有显示日期，也没有添加来自函数的数据。我尝试了很多不同的东西，但现在我没有想法了。

希望你能帮助我。

【参考方案1】：

你缺少 echo 函数值，尝试替换这个：

let priceFromFunction = ["<?php golemPrice();?>"];

到

let priceFromFunction = ["<?php echo golemPrice() ?>"];