ChartJS添加3yAx

Question

我试着制作这个图表，问题是我需要更多的y轴，因为股票数据和评论/价格，但看起来在我尝试这样做后，图表没有加载，我尝试的是添加：yAxisID: '#name#'到每个数据集。

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

$(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数据：

[{"stock":"100","price":"9.99","rating":"5","best_seller_rank":"40","scrape_date":"2017-07-05 17:22:00"},{"stock":"93","price":"9.99","rating":"5","best_seller_rank":"291","scrape_date":"2017-07-07 00:44:00"},{"stock":"93","price":"9.99","rating":"5","best_seller_rank":"563","scrape_date":"2017-07-07 16:47:00"},{"stock":"92","price":"9.99","rating":"5","best_seller_rank":"495","scrape_date":"2017-07-08 17:44:00"},{"stock":"90","price":"9.99","rating":"5","best_seller_rank":"641","scrape_date":"2017-07-09 20:28:00"},{"stock":"1000","price":"9.99","rating":"5","best_seller_rank":"899","scrape_date":"2017-07-10 17:51:00"},{"stock":"83","price":"9.99","rating":"5","best_seller_rank":"973","scrape_date":"2017-07-11 18:20:00"},{"stock":"79","price":"9.99","rating":"5","best_seller_rank":"575","scrape_date":"2017-07-12 19:32:00"},{"stock":"76","price":"9.99","rating":"5","best_seller_rank":"970","scrape_date":"2017-07-13 16:03:00"},{"stock":"77","price":"9.99","rating":"5","best_seller_rank":"845","scrape_date":"2017-07-14 16:26:00"},{"stock":"72","price":"9.99","rating":"7","best_seller_rank":"255","scrape_date":"2017-07-17 13:09:00"},{"stock":"64","price":"9.99","rating":"8","best_seller_rank":"999","scrape_date":"2017-07-19 14:41:00"},{"stock":"1000","price":"9.99","rating":"8","best_seller_rank":"55","scrape_date":"2017-07-20 18:37:00"},{"stock":"58","price":"9.99","rating":"8","best_seller_rank":"39","scrape_date":"2017-07-21 12:56:00"},{"stock":"1000","price":"9.99","rating":"8","best_seller_rank":"983","scrape_date":"2017-07-24 01:55:00"},{"stock":"36","price":"9.99","rating":"8","best_seller_rank":"428","scrape_date":"2017-07-24 23:26:00"},{"stock":"1000","price":"9.99","rating":"8","best_seller_rank":"294","scrape_date":"2017-07-27 11:15:00"},{"stock":"8","price":"9.99","rating":"8","best_seller_rank":"11","scrape_date":"2017-07-29 16:09:00"},{"stock":"1","price":"9.99","rating":"8","best_seller_rank":"13","scrape_date":"2017-07-31 21:01:00"},{"stock":"65","price":"9.99","rating":"8","best_seller_rank":"15","scrape_date":"2017-08-01 23:33:00"}]

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>

​