如何使用chart.js创建两个y轴标签

时间:2018-12-16 19:52:25

标签: chart.js

我已经使用chartjs制作了图表,但是如何在chart.js中制作多个x轴标签?

我想要左Y轴的得分,想要右Y轴的CX和VL。 右边的Y轴上的值是百分比,这可能吗?

$(document).ready(function(){

$。ajax({     url:“ followersdata.php”,     类型:“ GET”,     成功:功能(数据){       console.log(data);

  var week = [];
  var score = [];
  var cx = [];
  var vl = [];

  for(var i in data) {
    week.push(data[i].week);
    score.push(data[i].score);
    cx.push(data[i].cx);
    vl.push(data[i].vl);
  } 

  var chartdata = {
    labels: week,
    datasets: [
      {
        label: "score",
        fill: false,
        lineTension: 0.1,
        backgroundColor: "rgba(59, 89, 152, 0.75)",
        borderColor: "rgba(243, 10, 142, 1)",
        pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
        pointHoverBorderColor: "rgba(59, 89, 152, 1)",
        data: score
      },
      {
        label: "CX",
        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: cx
      },
      {
        label: "V&L",
        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: vl
      }
    ]
  };

  var ctx = $("#mycanvas");

  var LineGraph = new Chart(ctx, {
    type: 'line',
    data: chartdata
  });
},
error : function(data) {

}

}); });

0 个答案:

没有答案