0
134
VistasCómo mostrar solo una línea a tiempo en varios conjuntos de datos en el gráfico de líneas js
Tengo dos líneas en mi gráfico charts.js. Uno está en escala de 1-10 y el otro es 100 000-1 000 000 000. Me gustaría tenerlos en un gráfico, no dos, pero no mostrarlos en el mismo tiempo porque entonces son solo una línea recta. .
¿Es posible mostrar una u otra línea en la configuración del gráfico? Cuando giro el primero, el segundo se escondería automáticamente y viceversa. La primera imagen podría confundir a un usuario. Quiero que al cargar por primera vez, se muestre como en pic2 o pic3.
Este es mi código de gráfico:
public barChartOptions: ChartOptions = { indexAxis: 'x', responsive: true, plugins: {} }; public barChartLabels: string[] = this.xLabels; public barChartType: ChartType = 'line'; public barChartLegend = true; public barChartData: ChartDataset[] = [ { data: [], backgroundColor: 'green', borderColor: 'rgb(75, 192, 192)', label: 'Volume [m3]', fill: false, }, { data: [], backgroundColor: 'red', borderColor: 'rgb(255, 127, 127)', label: 'Flow [m3/h]', fill: false } ];2 Respuestas
Responde la pregunta0
usar la opción de conjunto de datos hidden
public barChartData: ChartDataset[] = [ { data: [], backgroundColor: 'green', borderColor: 'rgb(75, 192, 192)', label: 'Volume [m3]', fill: false, hidden: false // <-- shown }, { data: [], backgroundColor: 'red', borderColor: 'rgb(255, 127, 127)', label: 'Flow [m3/h]', fill: false, hidden: true // <-- hidden } ];0
isHiden = false; public barChartOptions: ChartOptions = { indexAxis: 'x', responsive: true, plugins: { legend: { onClick: this.toggleLegendClickHandler } } }; public barChartLabels: string[] = this.xLabels; public barChartType: ChartType = 'line'; public barChartLegend = true; public barChartData: ChartDataset[] = [ { data: [], backgroundColor: 'green', borderColor: 'rgb(75, 192, 192)', label: 'Cumulative [m3]', fill: false, hidden: this.isHiden }, { data: [], backgroundColor: 'red', borderColor: 'rgb(255, 127, 127)', label: 'Flow [m3/h]', fill: false, hidden: !this.isHiden } ];Actualicé el controlador onClick() original para la leyenda:
toggleLegendClickHandler(e: ChartEvent, legendItem: LegendItem, legend: any): void { let index = legendItem.datasetIndex; let indexOther: number = (index === 0) ? 1 : 0; console.log("legendItem.datasetIndex: " + index + " indexOther: " + indexOther); const ci = legend.chart; if (ci.isDatasetVisible(index)) { ci.hide(index); legendItem.hidden = true; ci.show(indexOther); } else { ci.show(index); legendItem.hidden = false; ci.hide(indexOther); }}
Ahora, solo un elemento de leyenda puede estar activo, el otro está cruzado. Si hace clic en el otro, se vuelve visible, el primero se cruza. Es o o y no pueden estar juntos encendido o apagado. Tal vez esto podría agregarse a chartsjs como una opción permanente: toggleLegend.