Отображение списка графиков, выбранных из выбора месяца, в раскрывающемся списке

Question

Я новичок в Highcharts и JS.На каждый месяц у меня есть 5 графиков.Здесь я просто делюсь 5 примерами диаграмм.Я должен создать выпадающее меню с каждым пунктом меню для каждого месяца.Когда я выбираю месяц, все графики за этот месяц должны отображаться в своих делениях.Месяц по умолчанию должен быть текущим месяцем.Как я мог это сделать?

Вот мой код:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div class="row">
    <div class="col-lg-4 col-md-12 col-xs-12">
        <div id="container1"></div>
    </div>
    <div class="col-lg-4 col-md-12 col-xs-12">
        <div id="container2"></div>
    </div>
    <div class="col-lg-4 col-md-12 col-xs-12">
        <div id="containerx"></div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-12 col-xs-12">
        <div id="container3"></div>
    </div>
    <div class="col-lg-6 col-md-12 col-xs-12">
        <div id="container4"></div>
    </div>
</div>

<div id="container1"></div>
<div id="container2"></div>

JavaScript:

Highcharts.chart('container1', {
    title: {
        text: 'Pie point CSS'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        type: 'pie',
        allowPointSelect: true,
        keys: ['name', 'y', 'selected', 'sliced'],
        data: [
            ['Apples', 29.9, false],
            ['Pears', 71.5, false],
            ['Oranges', 106.4, false],
            ['Plums', 129.2, false],
            ['Bananas', 144.0, false],
            ['Peaches', 176.0, false],
            ['Prunes', 135.6, true, true],
            ['Avocados', 148.5, false]
        ],
        showInLegend: true
    }]
});

Highcharts.chart('container2', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Population (millions)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' millions'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year 1900',
        data: [133, 156, 947, 408, 6]
    }, {
        name: 'Year 2000',
        data: [814, 841, 3714, 727, 31]
    }, {
        name: 'Year 2016',
        data: [1216, 1001, 4436, 738, 40]
    }]
});

Highcharts.chart('containerx', {
    title: {
        text: 'Pie point CSS'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        type: 'pie',
        allowPointSelect: true,
        keys: ['name', 'y', 'selected', 'sliced'],
        data: [
            ['Apples', 29.9, false],
            ['Pears', 71.5, false],
            ['Oranges', 106.4, false],
            ['Plums', 129.2, false],
            ['Bananas', 144.0, false],
            ['Peaches', 176.0, false],
            ['Prunes', 135.6, true, true],
            ['Avocados', 148.5, false]
        ],
        showInLegend: true
    }]
});

Highcharts.chart('container3', {
    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },
    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },
    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});

Highcharts.chart('container4', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
    }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
    }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
    }]
});

Скрипка находится на https://jsfiddle.net/hwm213dt/5/

Answer 1

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

Сначала я подготовил данные, чтобы они присваивались каждому месяцу. Затем я добавил слушатель onchange для элемента dropdown и обновил все диаграммы новыми данными из определенного ранее объекта данных, используя встроенный метод Chart.update(). Я оставил комментарии в своем коде, чтобы вы могли прочитать, что происходит «шаг за шагом», но если какая-то часть вам непонятна или непонятна, просто спросите в комментарии ниже этот ответ.

var months = {} // Will be the object with data structure for each month
var dropdown = document.getElementById('dropdown-months')
var options = dropdown.querySelectorAll('option')
var currentMonthId = new Date(Date.now()).getMonth()
var currentMonthName;

// Create random initial data
options.forEach(elem => {
  months[elem.value] = []
  for (var i = 0; i < 10; i++) {
    months[elem.value].push(Math.round(Math.random() * 100))
  }
  // Additionally, select current month in dropdown
  if (elem.value === Object.keys(months)[currentMonthId]) {
    currentMonthName = Object.keys(months)[currentMonthId]
    elem.selected = true
  }
})

dropdown.onchange = function() {
  var selectedMonth = this.value
  // Update all charts by new data
  Highcharts.charts.forEach(chart => {
    chart.update({
      series: [{
        data: months[selectedMonth]
      }]
    })
  })
}

// Generate charts and fill them by current month data
for (var i = 1; i <= 5; i++) {
  Highcharts.chart('container' + i, {
    series: [{
      data: months[currentMonthName]
    }]
  })
}

Живой пример: https://jsfiddle.net/yacrdfo0/

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Chart#update