Echemos un vistazo a los datos del gráfico simple:
tiene (x,y) pares:
| X | y |
|---|---|
| 0 | -3 |
| 1 | 2 |
| 2 | 7 |
| 3 | 8 |
| 4 | 15 |
| 5 | 0 |
La idea es crear un gráfico de líneas básico, usando VueJS en mi caso, pero la idea se puede generalizar a JavaScript.
Tengo una matriz en series de objetos, donde cada objeto tiene coordenadas x e y:
series = [ { x: 0, y: -3 }, { x: 1, y: 2 }, ... ] Esta serie es parte del objeto de options :
const options = { chart: { type: 'line' }, series: series } const chart = new ApexCharts(document.querySelector("#chart"), options); chart.render();Y se representa el gráfico. Ahora, digamos que quiero agregar los datos a ese gráfico: agregue 2 nuevos pares (x, y)
const newData = [ { x: 6, y: 20 }, { x: 7, y: -10 } ] chart.appendData([{ data: chartData }])También me gustaría que los datos agregados recientemente tengan, por ejemplo, un color, relleno u otra cosa diferente, por lo que los datos agregados recientemente se muestran de manera diferente a los datos antiguos.
No dude en señalarme la documentación si me perdí algo, pero busqué a través de los métodos de gráfico de vértice, y lo único que se parece remotamente a esto sería el interior
método updateOptions() , el indicador redrawPath ( documentos updateOptions :
Cuando se vuelve a representar el gráfico, debe dibujarse a partir de las rutas existentes o volver a dibujar completamente las rutas del gráfico desde el principio. De forma predeterminada, el gráfico se vuelve a representar a partir de las rutas existentes.
Para aplicar un estilo diferente a los nuevos datos, querrá colocar estos puntos de datos en una serie diferente usando el método appendSeries :
const newData = [ { x: 6, y: 20 }, { x: 7, y: -10 } ] chart.appendSeries({ name: "series-2", // optional data: newData }) La mayor parte del estilo en ApexCharts se basa en series (más específicamente seriesIndex ). Entonces, al colocar los nuevos datos en una serie separada, podrá diseñar esta segunda serie usando una matriz de, por ejemplo, colores .
Puede especificar el color que le gustaría usar al agregar la nueva serie de datos usando el método updateOptions que menciona, o puede especificarlo por adelantado.
chartOptions: { colors: ["#546E7A", "#E91E63"], } Cuando se trabaja con " Valores numéricos emparejados en propiedades XY ", el tipo de xaxis también debe establecerse explícitamente en numérico:
chartOptions: { xaxis: { type: 'numeric', }, }La parte complicada viene cuando desea agregar más datos una segunda vez (o una tercera vez, más). Hay dos enfoques que puedo pensar aquí:
series-2 a series-1 ) y sobrescribe series-2 con tus nuevos datos. No necesita editar los colors en chartOptions .colors con su color base cada vez que agregue una nueva serie. O si desea que cada serie tenga un color diferente, simplemente agregue un color cada vez que agregue una nueva serie.