Попытка отобразить различные типы диаграмм, используя тег выбора / опции - PullRequest
Новая
       19

Попытка отобразить различные типы диаграмм, используя тег выбора / опции

0 голосов
/ 20 мая 2018 

// Vancouver Population
var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
    type:'line',
    data: {
        labels: ["2000", "2005", "2010", "2015", "2018"],
        datasets: [{
            label: 'Vancouver Population Data',    
            data: [195000,2093000,2278000,2485000,2597000],
            borderColor: [
                'rgba(255,99,132,1)'
            ],
            backgroundColor:['rgba(255,200,200,0.3)'],
            borderWidth: 1,
            //borderDash:([3]),
            pointBackgroundColor:"red",
            pointBorderColor: "rgba(250,10,10,0.1)",
            pointBorderWidth:"10",
            pointStyle:"rectRounded",
            pointHoverBackgroundColor:"rgba(255,0,0,0.5)",
            pointHoverBorderColor: "rgba(255,255,100,0.7)",
            pointHoverRadius:"10",
            //showLine:false,
            //steppedLine:"false"
        }]
    },
    options: {
        title:{
            display:true,
            text:"Populations in Vancouver",
            fontSize:20,
            fontColor:"rgba(20,20,20,1)"
        },
        legend:{
            display:false,
            position:'right',
            labels:{
                fontColor:'#000'
        },
        },
        elements:{
            line:{
                tension:0, //disables bezier curves
            }
        },
        scales: {
            yAxes:[{
                ticks: {
                    beginAtZero:true,
                    callback: function(value,index,values){
                    return value + " people"
                }
                }   
                           
            }]
        },
        /*animation: {
        duration:0, // general animation time
    },*/
    hover:{
        animationDuration:0, // duration of animations when hovering an item
    },
        responsiveAnimationDuration:0, // animation duration after a resize
    }
});

// Vancouver Precipitation

var ctx = document.getElementById("barChart");
var BarChart = new Chart(ctx, {
    type:'bar',
    data: {
        labels:["May 2017", "June 2017", "July 2017", "Aug 2017","Sep 2017","Oct 2017","Nov 2017","Dec 2017","Jan 2018","Feb 2018","Mar 2018","Apr 2018","May 2018"],
        datasets:[{
               label:"Precipitation Data",
                data:[102.2,46.4,1.8,5.0,29.4,114.8,197.0,170.6,249.4,105.8,111.8,134.8,1.4],
                backgroundColor: [
                    'rgba(255,99,132,0.5)',
                    'rgba(155,130,32,0.5)',
                    'rgba(105,9,132,0.5)',
                    'rgba(15,130,202,0.5)',
                    'rgba(15,250,252,0.5)',
                    'rgba(205,100,32,0.5)',
                    'rgba(0,205,0,0.5)',
                    'rgba(55,15,52,0.5)',
                    'rgba(255,0,0,0.5)',
                    'rgba(25,59,52,0.5)',
                    'rgba(0,100,55,0.5)',
                    'rgba(200,111,199,0.5)',
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(155,130,32,1)',
                    'rgba(105,9,132,1)',
                    'rgba(15,130,202,1)',
                    'rgba(15,250,252,1)',
                    'rgba(205,100,32,0.5)',
                    'rgba(0,205,0,1)',
                    'rgba(55,15,52,1)',
                    'rgba(255,0,0,1)',
                    'rgba(25,59,52,1)',
                    'rgba(0,100,55,1)',
                    'rgba(200,111,199,1)',
                ],
                borderWidth:"1",
                pointHoverBackgroundColor:"#fff",
                hoverBorderColor:"#fff",
             }]
    },
    options: {
        title:{
            display:true,
            text:"Vancouver Precipitation",
            fontSize:20,
            fontColor:"rgba(10,0,20,0.9)"
        },
            legend:{
            display:false,
            position:'right',
            labels:{
                fontColor:'#000'
        }
            },
        scales:{
            yAxes:[{
                ticks:{
                    beginAtZero:true,
                    callback: function(value,index,values){
                    return value + " mm"
                }
                }
            }]
        }
    },
});

// Ethnicity 
var ctx = document.getElementById("pieChart");
var PieChart = new Chart(ctx,{
    type:'pie',
    data:{
        labels:['European Candadian','Chinese','South Asia','Fillipino','Southeast Asian','Japanese','Latin American','Mixed visible minority','Korean','Aboriginal','West Asian','Black','Arab'],
        datasets:[{
            label:"Ethnicity",
            data:[46.2,27.7,6,6,3,1.7,1.6,1.5,1.5,2,1.2,1,0.5],
            backgroundColor: [
                    'rgba(255,99,132,0.5)',
                    'rgba(155,130,32,0.5)',
                    'rgba(105,9,132,0.5)',
                    'rgba(15,130,202,0.5)',
                    'rgba(15,250,252,0.5)',
                    'rgba(205,100,32,0.5)',
                    'rgba(0,205,0,0.5)',
                    'rgba(55,15,52,0.5)',
                    'rgba(255,0,0,0.5)',
                    'rgba(25,59,52,0.5)',
                    'rgba(0,100,55,0.5)',
                    'rgba(200,231,50,0.5)',
                    'rgba(155,22,30,0.5)',
            ], 
            borderColor:[
                    'rgba(255,99,132,0.5)',
                    'rgba(155,130,32,0.5)',
                    'rgba(105,9,132,0.5)',
                    'rgba(15,130,202,0.5)',
                    'rgba(15,250,252,0.5)',
                    'rgba(205,100,32,0.5)',
                    'rgba(0,205,0,0.5)',
                    'rgba(55,15,52,0.5)',
                    'rgba(255,0,0,0.5)',
                    'rgba(25,59,52,0.5)',
                    'rgba(0,100,55,0.5)',
                    'rgba(200,231,50,0.5)',
                    'rgba(155,22,30,0.5)',
            ],
            borderWidth:[1]
        }],
        cutoutPercentage:[0]             
        
    },
    options:{
        title:{
            display:true,
            text:"Vancouver Ethnicity",
            fontSize:"20",
            fontColor:"rgba(20,20,20,1)"    
        },
    }
});

// Radar
Chart.defaults.scale.ticks.beginAtZero = true;

var ctx = document.getElementById("radarChart");
var RadarChart = new Chart(ctx, {
    type:'radar',
    data:{
        labels:['Hiking','Sporting Events','Stanley Park','Skiing & Snowboarding','Beaches','eating'],
        datasets:[{
            label:"Male",
            data:['50','70','80','60','20','70'],
            backgroundColor:[
                'rgba(255,155,32,0.5)',
            ],
            borderWidth:1,
            pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
            pointHoverBackgroundColor:["black"],
            pointStyle:["triangle"]
        },
        {
            label:"Female",
            data:['60','30','80','20','50','60'],
            backgroundColor:[
                'rgba(155,15,132,0.5)',
            ],
            borderWidth:1,
            pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
            pointHoverBackgroundColor:["black"],
            pointStyle:["triangle"]
        }
        ]
    },
    options:{
        title:{
        display:true,
        text:"Activities in Vancouver",
        fontSize:"20",
        fontColor:"rgba(10,0,20,0.9)"
        },
        legend:{
        display:false,
        position:'right',
        labels:{
            fontColor:'#000',
        }
            },
        scales:{
            scale: {
            }
        }
    }
});

// Select Options
var lineChart = document.getElementById("lineChart"),
    barChart = document.getElementById("barChart"),
    pieChart = document.getElementById("pieChart"),
    radarChart = document.getElementById("radarChart");

function myFunction(){
    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;
    if (chartType.options[i]) {
        lineChart.style.display = "inherit";
}
}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
   
   <div class="container">
        <h1><span>V</span>ancouver Census</h1>
        <!-- Vancouver Population -->
        <select id="chartType" onchange="myFunction()">
            <option value="line">Population</option>
            <option value="bar">Precipitation</option>
            <option value="pie">Ethnicity</option>
            <option value="radar">Activity</option>
        </select>
        <div class="chart_container" id="display">
            <canvas id="lineChart" style="display:none"></canvas>
            <canvas id="barChart" style="display:none"></canvas>
            <canvas id="pieChart" style="display:none"></canvas>
            <canvas id="radarChart" style="display:none"></canvas>
        </div>
    </div>

То, чего я пытаюсь достичь, - это когда я выбираю «популяцию», появляется линейная диаграмма.И когда я выбираю «осадки», появляется barChart.Я осознаю, что мне не хватает каких-то логических функций.Я попытался с оператором if, написав if (chartType.options [0]) {lineChart.style.display = "наследовать"}, но в итоге он применяется ко всем параметрам.Я ценю за советы и помощь.

1 Ответ

0 голосов
/ 20 мая 2018

После моего комментария:

1- Скрыть ранее показанный график

Для этого у вас есть две вещи: найти, какой график отображается в данный момент, и скрыть его.,

Давайте сначала добавим два класса: hidden-chart и active-chart и их CSS: 

.hidden-chart { display: none !important; }
.active-chart { display: inherit !important; }

И отредактируем HTML соответственно: 

<canvas id="lineChart" class="hidden-chart"></canvas>
<canvas id="barChart" class="hidden-chart"></canvas>
<canvas id="pieChart" class="hidden-chart"></canvas>
<canvas id="radarChart" class="hidden-chart"></canvas>

Хорошо, тактеперь вы можете иметь два типа диаграмм: скрытые диаграммы с классом hidden-chart и отображаемый в данный момент график с классом active-chart.

Чтобы достичь 1), вам теперь нужно добавитьследующий код для вашей функции: 

function myFunction() {
    const currentChart = document.querySelector("#display .active-chart");
    if (currentChart) {
        currentChart.classList.remove("active-chart"); // Remove the active-chart class
        currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
    }

    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;
    if (chartType.options[i]) {
        lineChart.style.display = "inherit";
    }
}

2- Случай переключателя в тексте выбранной опции:

Ну, это довольно тривиально switch, в HTMLElement.textпеременная: 

function myFunction() {
    const currentChart = document.querySelector("#display .active-chart");
    if (currentChart) {
        currentChart.classList.remove("active-chart"); // Remove the active-chart class
        currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
    }

    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;

    const selectedOption = chartType.options[i]; // The option the user has clicked on
    let toEnableChart;
    switch (selectedOption.text) {
        case 'Population':
            toEnableChart = lineChart;
            break;

        case 'Precipitation':
            toEnableChart = barChart;
            break;

        case 'Ethnicity':
            toEnableChart = pieChart;
            break;

        case 'Activity':
            toEnableChart = radarChart;
            break;
    }

    if (chartType.options[i]) {
        lineChart.style.display = "inherit";
    }
}

Вы можете заменить переключатель на стандартный, если еще, если еще, если еще построить.

3- Включить новый график

Теперь, когдамы знаем, какую диаграмму отображать (переменная toEnableChart, благодаря переключателю; и мы знаем, как ее отобразить - помните наши классы скрытых и активных диаграмм?), пришло время отобразить ее! 

function myFunction() {
    const currentChart = document.querySelector("#display .active-chart");
    if (currentChart) {
        currentChart.classList.remove("active-chart"); // Remove the active-chart class
        currentChart.classList.add("hidden-chart"); // Add the hidden-chart class thus hiding the chart
    }

    var chartType = document.getElementById("chartType");
    var i = chartType.selectedIndex;

    const selectedOption = chartType.options[i]; // The option the user has clicked on
    let toEnableChart;
    switch (selectedOption.text) {
        case 'Population':
            toEnableChart = lineChart;
            break;

        case 'Precipitation':
            toEnableChart = barChart;
            break;

        case 'Ethnicity':
            toEnableChart = pieChart;
            break;

        case 'Activity':
            toEnableChart = radarChart;
            break;
    }


    if (toEnableChart) {
        toEnableChart.classList.remove("hidden-chart");
        toEnableChart.classList.add("active-chart");
    }

Как вы можете заметить, отображение нового графика - это шаг № 1, но в обратном направлении.

Feel frЕсли что-то неясно прокомментировать.

...