1

所以我有一个包含两个系列的 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,

                      }
                  }]
              }
          }
      });


  });
4

1 回答 1

6

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

小提琴

于 2016-05-18T15:47:46.417 回答