0

Galera sou novo aqui no fórum, porem me surgiu um problema, queria saber se é possível desenvolver um gráfico de linha, porem que marque certas áreas, igual ao gráfico da distribuição normalgráfico Distribuição Normal, já tentei com o charts porem só consegui chegar em um resultado pouco parecido,se puderem ajudar desde de já agradeço.grafico consegui

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<style type="text/css">

		</style>
	</head>
	<body>
<script src="javascript/highcharts.js"></script>
<script src="javascript/exporting.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<canvas id="myChart"></canvas>



		<script type="text/javascript">
        const CHART = document.getElementById('myChart').getContext('2d');
        var data = [1,2,3,4,5,6];      
        console.log(CHART);
        let lineChart = new Chart(CHART, {
            type:'line',
            data:  {
                //nomes
                labels:["","","","","desvioPadrao1","media","desviopadrao2","","","",""],
                datasets:[{
                    label:"meu grafico",
                    fill:false,
                    backgroundColor:"rgba(72,192,192,0.4)",
                    borderColor:"rgba(93,95,92,1)",
                    borderCapStyle:'butt',
                    borderDash:[],
                    borderDashOffset:0.0,
                    borderJoinStyle:'miter',
                    fill:1,
                   
                   
                    data:[0.1,0.5,1,2,5,10,5,2,1,0.5,0.1],
                },
                {
                    label:"meu grafico",
                 
                    backgroundColor:"rgba(00,02,192,0.4)",
                    borderColor:"rgba(93,95,92,1)",
                    
                    
                    
                    data:[0,0,0,0,5,10,5,2,0,0,0],
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            max: 10+2
                        }
                    }],
                    xAxes:[{
                        ticks:{
                            scaleLabel: {
                                display:true
                            }
                            
                        }
                    }]
                    
                }
            }

        });
		</script>
	</body>
</html>

1 Resposta 1

2

Com o HighCharts você consegue fazer um gráfico com duas séries: uma em linha e outra em área. Pra chegar no resultado que você quer, basta colocar null nos valores de interseção dos dois gráficos, no seu caso:

series: [{
        type: 'spline',
        name: 'Line',
        data: [0.1,0.5,1,2,5,null,null,2,1,0.5,0.1]
    }, {
        type: 'areaspline',
        name: 'Area',
        data: [null,null,null,null,5,10,5,2,null,null,null]
    }]

A linha vai começar do 0.1 e vai até o valor 5, onde começa o gráfico de área e vai até o valor 2, depois volta pro gráfico de linha.

Montei o gráfico pra você ver como fica: http://jsfiddle.net/2kj4k66w/1/

Ps.: Se você quiser que o tipo de gráfico seja o inverso, basta trocar os 'types' de cada série.

Espero ter ajudado :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .