ChartJS添加3yAxes

Question

我尝试制作这个图表，问题是我需要更多的y轴，因为库存数据和评论/价格但看起来像我尝试这样做后图表没有加载，我尝试添加：{ {1}}到每个数据集。

所以我想为Price添加一个y轴，一个用于评论，一个用于Rank。

yAxisID: '#name#'

这是我的 $(document).ready(function(){ $.ajax({ url : "/data.php", type : "GET", success : function(data){ console.log(data); var stock = []; var price = []; var reviews = []; var date = []; for(var i in data) { stock.push(data[i].stock); price.push(data[i].price); reviews.push(data[i].rating); date.push(data[i].scrape_date); } var chartdata = { labels: date, datasets: [ { label: "price", fill: false, lineTension: 0.1, backgroundColor: "rgba(59, 89, 152, 0.75)", borderColor: "rgba(59, 89, 152, 1)", pointHoverBackgroundColor: "rgba(59, 89, 152, 1)", pointHoverBorderColor: "rgba(59, 89, 152, 1)", data: price }, { label: "reviews", fill: false, lineTension: 0.1, backgroundColor: "rgba(29, 202, 255, 0.75)", borderColor: "rgba(29, 202, 255, 1)", pointHoverBackgroundColor: "rgba(29, 202, 255, 1)", pointHoverBorderColor: "rgba(29, 202, 255, 1)", data: reviews }, { label: "stock", fill: false, lineTension: 0.1, backgroundColor: "rgba(211, 72, 54, 0.75)", borderColor: "rgba(211, 72, 54, 1)", pointHoverBackgroundColor: "rgba(211, 72, 54, 1)", pointHoverBorderColor: "rgba(211, 72, 54, 1)", data: stock } ] }; var ctx = $("#mycanvas"); var LineGraph = new Chart(ctx, { data: chartdata }); }, error : function(data) { } }); }); 数据：

data.php

Answer 1

图表未加载，因为您尚未定义图表类型（条形图，折线图等）。

所以，定义图表类型，如下：

...
var LineGraph = new Chart(ctx, {
         type: 'line',
         data: chartdata,
         ...

现在，要添加三个y轴，首先需要为每个数据集设置 yAxisID ，如下所示：

...
datasets: [{
   ...,
   yAxisID: 'price'
}, {
   ...,
   yAxisID: 'reviews'
}, {
   ...,
   yAxisID: 'stock'
}]
...

然后，添加三个单独的y轴并在图表选项中设置其ID，如下所示：

options: {
   scales: {
      yAxes: [{
         id: 'price'
      }, {
         id: 'reviews'
      }, {
         id: 'stock'
      }]
   }
}

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

$(document).ready(function() {
   $.ajax({
      url: "https://istack.000webhostapp.com/json/t12.json",
      type: "GET",
      success: function(data) {
         console.log(data);

         var stock = [];
         var price = [];
         var reviews = [];
         var date = [];

         for (var i in data) {
            stock.push(data[i].stock);
            price.push(data[i].price);
            reviews.push(data[i].rating);
            date.push(data[i].scrape_date);
         }

         var chartdata = {
            labels: date,
            datasets: [{
               label: "price",
               fill: false,
               lineTension: 0.1,
               backgroundColor: "rgba(59, 89, 152, 0.75)",
               borderColor: "rgba(59, 89, 152, 1)",
               pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
               pointHoverBorderColor: "rgba(59, 89, 152, 1)",
               data: price,
               yAxisID: 'price'

            }, {
               label: "reviews",
               fill: false,
               lineTension: 0.1,
               backgroundColor: "rgba(29, 202, 255, 0.75)",
               borderColor: "rgba(29, 202, 255, 1)",
               pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
               pointHoverBorderColor: "rgba(29, 202, 255, 1)",
               data: reviews,
               yAxisID: 'reviews'

            }, {
               label: "stock",
               fill: false,
               lineTension: 0.1,
               backgroundColor: "rgba(211, 72, 54, 0.75)",
               borderColor: "rgba(211, 72, 54, 1)",
               pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
               pointHoverBorderColor: "rgba(211, 72, 54, 1)",
               data: stock,
               yAxisID: 'stock'
            }]
         };
         var ctx = $("#mycanvas");

         var LineGraph = new Chart(ctx, {
            type: 'line',
            data: chartdata,
            options: {
               scales: {
                  yAxes: [{
                     id: 'price'
                  }, {
                     id: 'reviews'
                  }, {
                     id: 'stock'
                  }]
               }
            }
         });
      },
      error: function(data) {

      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="mycanvas"></canvas>