是否可以在圖表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 
    }); 
}