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

Question

我一直在尝试几天，动态地添加自定义比例到我的图表，使用图表js。我正在使用Angular 2和Typescript。

我尝试了两种不同的方式。第一个触发错误。第二个工作，但它不是我的目标。那么我做错了什么？

首先方法： 我有具有一定的输入来设置自定义比例的模态和它返回一个对象，看起来像从图表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

你可以摧毁图表，并再次运行新的图表功能。

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