Возвращает извлеченный JSON правильно, но не может получить его в Chart.JS - PullRequest
1 голос
/ 19 октября 2019

Я несколько месяцев изучаю веб-разработчик и пытаюсь избежать чистилища урока, выполняя некоторые из моих собственных проектов. Первый предназначен для расширения Chrome, которое заполняет новую вкладку содержимым. В этом случае я хочу, чтобы этот контент представлял собой крипто-ценовые диаграммы, новостные статьи и твиты. Этот вопрос касается графиков.

У меня здесь настроен кодовый блок со всем кодом для этого вопроса: https://codepen.io/diggitydoge/pen/QWWGMNb

Проблема Я вижу данныеЯ хочу (один ценовой массив и один временной массив) в консоли со следующим, но не знаю, как получить его на моем графике, и не могу найти здесь ни одного руководства или ответа, который бы четко объяснял, как я буду:

const btcTime = async () => {
    const response = await fetch('https://min-api.cryptocompare.com/data/v2/histominute?fsym=BTC&tsym=USD&limit=119&api_key=0646cc7b8a4d4b54926c74e0b20253b57fd4ee406df79b3d57d5439874960146');
    const json = await response.json();
    const data = json.Data.Data
    const times = data.map(obj => obj.time)
    return times;
}

const btcPrice = async () => {
    const response = await fetch('https://min-api.cryptocompare.com/data/v2/histominute?fsym=BTC&tsym=USD&limit=119&api_key=0646cc7b8a4d4b54926c74e0b20253b57fd4ee406df79b3d57d5439874960146');
    const json = await response.json();
    const data = json.Data.Data
    const price = data.map(obj => obj.high)
    return {
      price
    }
}

async function btcTimeArray(){
  let results = await btcTime()
  
  console.log(results)
}

btcTimeArray() 

async function btcPriceArray(){
  let results = await btcPrice()
  
  console.log(results)
}

btcPriceArray() 


//---HELPER FUNCTIONS---//
  function checkStatus(response) {
    if (response.ok) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(new Error(response.statusText));
    }
  }

У меня есть btcTime, возвращающий массив, и btcPrice, возвращающий объект, содержащий массив, только для того, чтобы увидеть, имеет ли какой-либо смысл разницу в следующем шаге:

Вставка результатов в наборы данных Chart.JS

Вот как выглядят наборы данных с фиктивными данными, которые работают

labels: ['a', 'b', 'c', 'd', 'e', 'f'],
        datasets: [{
            label: 'Population',
            data: [
               610994,
               181045,
               153060,
               106519,
               105162,
               95072 
            ],

Итак, на данный момент я ...

  1. вижу мои данные о цене и времени в биткойнах в консоли
  2. нужночтобы узнать, как сохранить / вызвать / target / что угодно, чтобы поместить времена в свойство меток Chart.JS и цены в ключ данных Chart.js в объекте наборов данных.

Я пыталсячто-то вроде этого, но это не сработало:

labels: btcTime,
        datasets: [{
            label: 'Population',
            data: btcPrice,

Большое спасибо за вашу помощь !!!

Ответы [ 2 ]

0 голосов
/ 24 октября 2019

Спасибо @headhunterkev!

Я сам разобрался, но мне придется проверить ваш выход!

Вот как я это сделал: https://codepen.io/diggitydoge/pen/MWWmgJp

///  Calling API and modeling data for each chart ///
const btcData = async () => {
  const response = await fetch('https://min-api.cryptocompare.com/data/v2/histominute?fsym=BTC&tsym=USD&limit=119&api_key=0646cc7b8a4d4b54926c74e0b20253b57fd4ee406df79b3d57d5439874960146');
  const json = await response.json();
  const data = json.Data.Data
  const times = data.map(obj => obj.time)
  const prices = data.map(obj => obj.high)
  return {
    times,
    prices
  }
}


const cosmosData = async () => {
  const response = await fetch('https://min-api.cryptocompare.com/data/v2/histominute?fsym=ATOM&tsym=USD&limit=119&api_key=0646cc7b8a4d4b54926c74e0b20253b57fd4ee406df79b3d57d5439874960146');
  const json = await response.json();
  const data = json.Data.Data
  const times = data.map(obj => obj.time)
  const prices = data.map(obj => obj.high)
  return {
    times,
    prices
  }
}


const ethereumData = async () => {
  const response = await fetch('https://min-api.cryptocompare.com/data/v2/histominute?fsym=ETH&tsym=USD&limit=119&api_key=0646cc7b8a4d4b54926c74e0b20253b57fd4ee406df79b3d57d5439874960146');
  const json = await response.json();
  const data = json.Data.Data
  const times = data.map(obj => obj.time)
  const prices = data.map(obj => obj.high)
  return {
    times,
    prices
  }
}


const checker = async () => {
  //enter API URL into fetch to see data in console
  const response = await fetch('https://min-api.cryptocompare.com/data/v2/histominute?fsym=BTC&tsym=USD&limit=119&api_key=0646cc7b8a4d4b54926c74e0b20253b57fd4ee406df79b3d57d5439874960146');
  const json = await response.json();
  const data = json.Data.Data
  return {
   data
  }
}


/// console.log functions to check data ///
async function btcDataCheck() {
  let results = await btcData()

  console.log(results)
}
btcDataCheck()

async function checkerFunction() {
  let results = await checker()

  console.log(results)
}
checkerFunction()

/// Error handling ///
function checkStatus(response) {
  if (response.ok) {
    return Promise.resolve(response);
  } else {
    return Promise.reject(new Error(response.statusText));
  }
}



/// Charts ///
let createBtcChart
let createCosmosChart
let createethereumChart

async function printBtcChart() {
  let { times, prices } = await btcData()

  let btcChart = document.getElementById('btcChart').getContext('2d');

  let gradient = btcChart.createLinearGradient(0, 0, 0, 400);

  gradient.addColorStop(0, 'rgba(247,147,26,.5)');
  gradient.addColorStop(.425, 'rgba(255,193,119,0)');

  Chart.defaults.global.defaultFontFamily = 'Red Hat Text';
  Chart.defaults.global.defaultFontSize = 12;

  createBtcChart = new Chart(btcChart, {
    type: 'line',
    data: {
      labels: times,
      datasets: [{
        label: '$',
        data: prices,
        backgroundColor: gradient,
        borderColor: 'rgba(247,147,26,1)',
        borderJoinStyle: 'round',
        borderCapStyle: 'round',
        borderWidth: 3,
        pointRadius: 0,
        pointHitRadius: 10,
        lineTension: .2,
      }]
    },

    options: {
      title: {
        display: false,
        text: 'Heckin Chart!',
        fontSize: 35
      },

      legend: {
        display: false
      },

      layout: {
        padding: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        }
      },

      scales: {
        xAxes: [{
          display: false,
          gridLines: {}
        }],
        yAxes: [{
          display: false,
          gridLines: {}
        }]
      },

      tooltips: {
        callbacks: {
          //This removes the tooltip title
          title: function() {}
       },
        //this removes legend color
        displayColors: false,
        yPadding: 10,
        xPadding: 10,
        position: 'nearest',
        caretSize: 10,
        backgroundColor: 'rgba(255,255,255,.9)',
        bodyFontSize: 15,
        bodyFontColor: '#303030' 
      }
    }
  });
}



async function printCosmosChart() {
  let { times, prices } = await cosmosData()

  let cosmosChart = document.getElementById('cosmosChart').getContext('2d');

  let gradient = cosmosChart.createLinearGradient(0, 0, 0, 400);

  gradient.addColorStop(0, 'rgba(27,30,54,.5)');
  gradient.addColorStop(.425, 'rgba(46,49,72,0)');

  Chart.defaults.global.defaultFontFamily = 'Red Hat Text';
  Chart.defaults.global.defaultFontSize = 12;

  createCosmosChart = new Chart(cosmosChart, {
    type: 'line',
    data: {
      labels: times,
      datasets: [{
        label: "",
        data: prices,
        backgroundColor: gradient,
        borderColor: 'rgba(46,49,72,1)',
        borderJoinStyle: 'round',
        borderCapStyle: 'round',
        borderWidth: 3,
        pointRadius: 0,
        pointHitRadius: 10,
        lineTension: .2,
      }]
    },

    options: {
      title: {
        display: false,
        text: 'Heckin Chart!',
        fontSize: 35
      },

      legend: {
        display: false
      },

      layout: {
        padding: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        }
      },

      scales: {
        xAxes: [{
          display: false,
          gridLines: {}
        }],
        yAxes: [{
          display: false,
          gridLines: {}
        }]
      },

      tooltips: {
        callbacks: {
          //This removes the tooltip title
          title: function() {}
       },
        //this removes legend color
        displayColors: false,
        yPadding: 10,
        xPadding: 10,
        position: 'nearest',
        caretSize: 10,
        backgroundColor: 'rgba(255,255,255,.9)',
        bodyFontSize: 15,
        bodyFontColor: '#303030' 
      }
    }
  });
}


async function printEthereumChart() {
  let { times, prices } = await ethereumData()

  let ethereumChart = document.getElementById('ethereumChart').getContext('2d');

  let gradient = ethereumChart.createLinearGradient(0, 0, 0, 400);

  gradient.addColorStop(0, 'rgba(78,56,216,.5)');
  gradient.addColorStop(.425, 'rgba(118,106,192,0)');

  Chart.defaults.global.defaultFontFamily = 'Red Hat Text';
  Chart.defaults.global.defaultFontSize = 12;

  createEthereumChart = new Chart(ethereumChart, {
    type: 'line',
    data: {
      labels: times,
      datasets: [{
        label: '$',
        data: prices,
        backgroundColor: gradient,
        borderColor: 'rgba(118,106,192,1)',
        borderJoinStyle: 'round',
        borderCapStyle: 'round',
        borderWidth: 3,
        pointRadius: 0,
        pointHitRadius: 10,
        lineTension: .2,
      }]
    },

    options: {
      title: {
        display: false,
        text: 'Heckin Chart!',
        fontSize: 35
      },

      legend: {
        display: false
      },

      layout: {
        padding: {
          left: 0,
          right: 0,
          top: 0,
          bottom: 0
        }
      },

      scales: {
        xAxes: [{
          display: false,
          gridLines: {}
        }],
        yAxes: [{
          display: false,
          gridLines: {}
        }]
      },

      tooltips: {
        callbacks: {
          //This removes the tooltip title
          title: function() {}
       },
        //this removes legend color
        displayColors: false,
        yPadding: 10,
        xPadding: 10,
        position: 'nearest',
        caretSize: 10,
        backgroundColor: 'rgba(255,255,255,.9)',
        bodyFontSize: 15,
        bodyFontColor: '#303030' 
      }
    }
  });
}

async function updateEthereumPrice() {
  let { times, prices } = await ethereumData()
  let currentPrice = prices[prices.length-1].toFixed(2);

  document.getElementById("ethPrice").innerHTML = "$" + currentPrice;
}

async function updateCosmosPrice() {
  let { times, prices } = await cosmosData()
  let currentPrice = prices[prices.length-1].toFixed(2);

  document.getElementById("atomPrice").innerHTML = "$" + currentPrice;
}

async function updateBitcoinPrice() {
  let { times, prices } = await btcData()
  let currentPrice = prices[prices.length-1].toFixed(2);

  document.getElementById("btcPrice").innerHTML = "$" + currentPrice;
}

updateEthereumPrice()
updateCosmosPrice()
updateBitcoinPrice()

printBtcChart()
printCosmosChart()
printEthereumChart()
$card-text-color: #303030;

///  FONTS  ///
h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.25em;
}

h1, 
h2, 
p {
    font-family: 'Red Hat Text', sans-serif;
    color: $card-text-color;
}

/// Card Container ///
.container {
    display: flex;
    justify-content: center;
}


/// Cards ///
cards {
    width: 90%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 30px;
    padding-bottom: 30px;
}

.btc,
.cosmos,
.ethereum {
    display: grid;
    max-width: 300px;
    min-width: 250px;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(50px, 60px) 1fr;
    grid-template: 
        "info"
        "chart";
    border-radius: 30px;
}

.btc {
    box-shadow: 10px 10px 20px 1px rgba(247,147,26,.15);
}

.cosmos {
    box-shadow: 10px 10px 20px 1px rgba(46,49,72,.15);
}

.ethereum {
    box-shadow: 10px 10px 20px 1px rgba(78,56,216,.15);
}

.asset-info {
    grid-area: info;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5% 0 5%;
}

.title {
    display: inline-flex;
}

card h1 {
    margin-left: 10px;
}

// .asset-price {

// }


/// Charts ///
#btcChart,
#cosmosChart,
#ethereumChart {
    grid-area: chart;
    border-radius: 0px 0px 30px 30px;
    margin-top: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Red+Hat+Text:400,500&display=swap" rel="stylesheet">
    <title>Issa Chart!</title>
</head>
<body>
  <container class="container">
    <cards class="cards">
        <bitcoin style="width: 30%" class="btc">
            <card class="asset-info">
                <div class="title">
                    <img src="https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/btc.svg" width="15%"> 
                    <h1>Bitcoin</h1>
                </div>
                <div class="details">
                    <h2 class="asset-price" id="btcPrice"></h2>
                </div>
            </card>
            <canvas id="btcChart"></canvas>
        </bitcoin>

        <cosmos style="width: 30%" class="cosmos">
            <card class="asset-info">
                <div class="title">
                    <img src="https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/atm.svg" width="15%"> 
                    <h1>Cosmos</h1>
                </div>
                <div class="details">
                    <h2 class="asset-price" id="atomPrice"></h2>
                </div>
            </card>
            <canvas id="cosmosChart"></canvas>
        </cosmos>

        <ethereum style="width: 30%" class="ethereum">
            <card class="asset-info">
                <div class="title">
                    <img src="https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/eth.svg" width="10%"> 
                    <h1>Ethereum</h1>
                </div>
                <div class="details">
                    <h2 class="asset-price" id="ethPrice"></h2>
                </div>
            </card>
            <canvas id="ethereumChart"></canvas>
        </ethereum>
    </cards>
  </container>
</body>
<script src="app.js"></script>
</html>
0 голосов
/ 21 октября 2019

Отказ от ответственности: я не очень люблю асинхронные вещи. Может быть, мой код, касающийся этой проблемы, ужасен. Пожалуйста, не стесняйтесь исправлять меня.

Вам нужно подождать, пока запрос на выборку и его данные не создадут ваш график, или вы должны обновить его, когда поступят ваши данные. Я использовал метод обновления. Я положил свой код в JSBin.

async function btcTimeArray() {
  let results = await btcTime()

  console.log(results)
  updateTime(results)
}

function updateTime(results) {
  btcChart.data.labels = results
  btcChart.update()
}

PS: Вы должны сравнить мой код с вашим. Я сделал несколько изменений, которые я считаю лучше, но это может быть личное мнение. Это было только для моего времени работы с вашим кодом, это может быть не то, что вы хотите. Я использую этот сайт для отображения различий в коде: https://www.diffchecker.com/diff

PPS: я бы добавил цветную вертикальную линию к текущему индексу зависания вместо того, чтобы использовать большую точку для данных, которые зависли, и вы отображаете подсказку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...