Chart.js将两个系列放在相同的比例上

时间:2016-05-09 06:05:14

标签: chart.js2

所以我有一个包含两个系列的chart.js图表​​。一个是条形图,另一个是折线图。

S1 = 71,166,2,6,8

S2 = 6,2,4,8,5

当我绘制它们时,它们都出现在它们自己的尺度上,这使得条形图和折线图看起来毫无意义。

我需要一种方法来绘制相同比例的两个图表。

有没有办法在chart.js中执行此操作?如果没有,你会怎么做?

感谢。

    var barChartData = {
    labels: dataLabels,
        datasets: [{
            type: 'bar',
              label: "Actual",
                data: dataActual,
                fill: false,
                backgroundColor: '#71B37C',
                borderColor: '#71B37C',
                hoverBackgroundColor: '#71B37C',
                hoverBorderColor: '#71B37C',
                yAxisID: 'y-axis-2'
        }, {
            label: "Maximum",
                type:'line',
                data: dataMaximum,
                fill: false,
                borderColor: '#EC932F',
                backgroundColor: '#EC932F',
                pointBorderColor: '#EC932F',
                pointBackgroundColor: '#EC932F',
                pointHoverBackgroundColor: '#EC932F',
                pointHoverBorderColor: '#EC932F',
                yAxisID: 'y-axis-1'
        } ]
    };

$(function () {
    if (theChart !== undefined) {
        theChart.destroy();
    } 
      var ctxActualVsMax = document.getElementById("myChart2").getContext("2d");

      theChart = new Chart(ctxActualVsMax, {
          type: 'bar',
          data: barChartData,
          options: {
              responsive: true,
              tooltips: {
                  mode: 'label'
              },
              elements: {
                  line: {
                      fill: false
                  }
              },
              scales: {
                  xAxes: [{
                      display: true,
                      gridLines: {
                          display: false
                      },
                      labels: {
                          show: true,
                      }
                  }],
                  yAxes: [{
                      type: "linear",
                      display: true,
                      position: "left",
                      id: "y-axis-1",
                      gridLines:{
                          display: false
                      },
                      labels: {
                          show:true,

                      }
                  }, {
                      type: "linear",
                      display: false,
                      position: "right",
                      id: "y-axis-2",
                      gridLines:{
                          display: false
                      },
                      labels: {
                          show:true,

                      }
                  }]
              }
          }
      });


  });

1 个答案:

答案 0 :(得分:4)

在您的代码中,您已指定两个数据集以使用不同的yAxisId。只需将它们设置为相同,您也可以从yAxes

中删除未使用的options对象

fiddle