是否可以在圖表js上動態添加更多Y軸或更多X軸？

Question

我已經嘗試了幾天，使用chart js動態地向圖表添加自定義比例。 我正在使用Angular 2和Typescript。

我以兩種不同的方式嘗試過。 第一個觸發錯誤。 第二個有效，但這不是我的目標。 那我在做什么錯？

第一種方法 ：我有一個模態，該模態具有一些輸入來設置自定義比例，並且它返回一個對象，該對象看起來像Chart JS文檔中的比例對象：

customScale = {
  id: 'y-axis-2',
  type: 'linear',
  position:'right',
  scaleLabel: {
    display: true,
    labelString: 'scale 3'
  },
  ticks: {
    max: 20,
    min: 1
  }
}

我有一個函數，應該將該比例添加到附加到我的圖表的比例數組中。

addCustomScale(customScale: any, axis: string) {
  const ci = this.chartComponent.chart;
  let scale = [];
  scale.push(customScale);
  if (axis === 'Axis Y') {
    ci.options.scales.yAxes = Chart.helpers.scaleMerge(Chart.defaults.scale,{yAxes: scale}).yAxes;
  } else {
    ci.options.scales.xAxes = Chart.helpers.scaleMerge(Chart.defaults.scale, {xAxes: scale}).xAxes;
  }
  ci.update();
}

調用此函數時，出現錯誤：

ERROR TypeError: Cannot set property 'options' of undefined
    at core.controller.js:51

到目前為止，我的圖表如下所示：

<canvas width="600" height="300" id="canvas" #myCanvas baseChart
      [datasets]="lineChartData"
      [labels]="lineChartLabels"
      [options]="mfChartOptions"
      [legend]="lineChartLegend"
      [chartType]="lineChartType"></canvas>

我在打字稿中定義了所有內容：

import {BaseChartDirective} from 'ng2-charts';

declare const Chart: any;
@Component({
   selector: 'app-chart',
   templateUrl: './chart.component.html',
   styleUrls: ['./chart.component.css']
})
export class ChartComponent {
 @ViewChild(BaseChartDirective) chartComponent: BaseChartDirective;

 public lineChartData: Array<any> = [
  {data: [65, 59, 80, 81, 56, 55, 40], yAxisID: 'y-axis-0', label: 'Series A'},
  {data: [28, 48, 40, 19, 86, 27, 90], yAxisID: 'y-axis-1', label: 'Series B'},
  {data: [18, 48, 77, 9, 100, 27, 40], yAxisID: 'y-axis-1', label: 'Series C'}
 ];

 public lineChartLabels: Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
 public lineChartLegend = true;
 public lineChartType = 'line';
 public mfChartOptions = {
  responsive: true,
  pan: {
    enabled: true,
    mode: 'xy'
    },
  zoom: {
    enabled: true,
    drag: true,
    mode: 'xy'
  },
  legend: {
    position: 'bottom',
  },
  scales: {
    yAxes: [{
      id: 'y-axis-0',
      type: 'linear',
      position: 'left',
    }, {
      id: 'y-axis-1',
      type: 'linear',
      position: 'right',
      ticks: {
        max: 100,
        min: 0
      }
    }]
  },
  annotation: {
    events: ['click'],
    annotations: []
  },
  tooltipTemplate: '<%if (label){%><%=label %>: <%}%><%= value + \' %\' %>',
  tooltips: {
    intersect: true,
    bodySpacing: 4
  },
  plugins: {
    filler: {
      propagate: true
    }
  }
};

第二種方法 。 我只是在選項中已經添加的秤上添加了另一個秤，像這樣：

public mfChartOptions = {
  responsive: true,
  pan: {
    enabled: true,
    mode: 'xy'
  },
  zoom: {
    enabled: true,
    drag: true,
    mode: 'xy'
  },
  scales: {
    yAxes: [{
      id: 'y-axis-0',
      type: 'linear',
      position: 'left',
    }, {
      id: 'y-axis-1',
      type: 'linear',
      position: 'right',
      ticks: {
        max: 100,
        min: 0
      }
    }, {
      id: 'y-axis-2',
      type: 'linear',
      position: 'right',
      ticks: {
        max: 80,
        min: 40
      }
    }]
  },
  annotation: {
    events: ['click'],
    annotations: []
  },
  tooltipTemplate: '<%if (label){%><%=label %>: <%}%><%= value + \' %\' %>',
  tooltips: {
    intersect: true,
    bodySpacing: 4
  },
  plugins: {
    filler: {
      propagate: true
    }
  }
};

並將我的數據集更改為：

public lineChartData: Array<any> = [
  {data: [65, 59, 80, 81, 56, 55, 40], yAxisID: 'y-axis-0', label: 'Series A'},
  {data: [28, 48, 40, 19, 86, 27, 90], yAxisID: 'y-axis-1', label: 'Series B'},
  {data: [18, 48, 77, 9, 100, 27, 40], yAxisID: 'y-axis-2', label: 'Series C'}
];

這一個工作得很好，但我想允許用戶創建自定義比例，而不是對其進行硬編碼。

Answer 1

您可以銷毀圖表並再次運行新的Chart函數。

這是小提琴： https : //jsfiddle.net/cbalakus/fhadc9by/

function addYAxis() {
    var leng = window.myLine.options.scales.yAxes.length + 1;
    var clr = chartColors[Math.floor(Math.random() * chartColors.length)];
    opts.scales.yAxes.push({
        type: "linear",
        display: true,
        position: "right",
        id: "y-axis-" + leng,
        ticks: {
            fontColor: clr
        }
    });
        lineChartData.datasets.push({
        label: "y-axis-" + leng,
        borderColor: clr,
        backgroundColor: clr,
        fill: false,
        data: getDatas(),
        yAxisID: "y-axis-" + leng,

    });
    window.myLine.destroy();
    var ctx = document.getElementById("cvs").getContext("2d");
    window.myLine = Chart.Line(ctx, {
        data: lineChartData,
        options: opts
    });
}