Как мне показать точку только для каждой n-й точки данных, используя React ChartJs? - PullRequest
Новая
       23

Как мне показать точку только для каждой n-й точки данных, используя React ChartJs?

0 голосов
/ 03 июня 2019

Я искал несколько сообщений, единственные ответы, которые я нашел, были только для показа каждого n-го ярлыка.Я пытаюсь показать только каждую точку n-й точки данных, сохраняя при этом тренд линии с этой точкой данных.Я надеюсь, что это имеет смысл.

Так, например, у меня есть такие данные: 

const data = [
    [1556946137009, 0.3056428749328792],
    [1556949699291, 0.3052645823199878],
    [1556953236188, 0.3064219950406184],
    [1556956813423, 0.30619822846339917],
    [1556960536911, 0.3051878341993484],
    [1556964019167, 0.30350702631519183]
]

И я хочу представить все данные на линейном графике, но я хочу только тамбыть точкой для каждой n-й точки данных.Итак, как точка для первого и последнего набора данных.И для всего, что находится между:

Если i%2 === 0, то укажите точку для этого пятна на линейном графике.

Вот то, что у меня есть сейчас.Я не уверен, как добиться того, чего я хочу.Я посмотрел на документы и нашел свойство spanGaps, но я не думаю, что это сработает, поскольку только в том случае, если нет данных для этой точки. 

import React from 'react';
import { Line } from 'react-chartjs-2';
import './Graph.scss';

export default class Graph extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            marketData: [props.marketData],
            chartData:{
                labels: props.timeData,
                datasets: [
                    {
                        label: 'Price in USD',
                        fill: false,
                        borderColor: "#bae755",
                        borderDash: [5, 5],
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        pointBackgroundColor: "#55bae7",
                        pointBorderColor: "#55bae7",
                        pointHoverBackgroundColor: "#55bae7",
                        pointHoverBorderColor: "#55bae7",
                        data: props.priceData,
                        backgroundColor:[
                            '#55bae7'
                        ]
                    }
                ]
            }
        }
    }

    render(){

        return (
            <div className='graph-inner-container'>
                <h2 className='graphName'>{this.props.graphname}</h2>
                <Line
                    data={this.state.chartData}
                    width={900}
                    height={450}
                    options={
                        {
                            maintainAspectRatio: true,
                            responsive: true,
                            aspectRatio: 2,
                            scales:{
                                xAxes:[{
                                    display: false
                                }]
                            },
                            layout: {
                                padding: {
                                    right: 10
                                }
                            }
                        }
                    }
                />
            </div>
        )
    }

}
...