是否可以在图表 js 上动态添加更多 Y 轴或更多 X 轴？

Question

几天来，我一直在尝试使用图表 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>

我在 typescript 中定义了所有内容：

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

您可以销毁图表并再次运行新的图表功能。

这里是小提琴：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
    });
}