Используйте двумерный массив наборов данных с Chart.js
Я изменил тему своих данных для ясности и конфиденциальности, но моя фактическая проблема идентична.
У меня есть данные в формате CSV, организованные по регионам, все в следующем формате: Канада.csv:
У меня есть это с идентичными культурами для us.csv, mexico.csv и т. д.
Моя конечная цель — создать линейную диаграммуchart.js, на которой можно одновременно отображать различные подмножества стран и культур. то есть вы можете проверить «картофель» и «кукуруза» + «Канада» и «Мексика» и увидеть соответствующие 4-х линейные диаграммы.
На мой взгляд, это имеет наибольший смысл в виде двумерного массива наборов данных:
new Object = {
canada:{
corn:data,
potato:data,
carrot:data
},
mexico:{
...
},
us:{
...
}
}
Однако, похоже, чтоchart.js ожидает одномерный массив наборов данных. Я планирую использовать функцию setDatasetVisibility(datasetIndex, Visibility) из API для управления видимостью диаграмм, но поскольку эта функция принимает только индекс, мне придется найти способ сопоставить каждое подмножество урожая/страны. пары с индексом, что кажется очень неудобным.
Я попытался создать список объектов в следующем формате:
[{
country:canada,
crop:corn,
index:0,
hidden:true,
data:{
x:year,
y:output
},
{...
}...]
Для всех комбинаций страны и культуры в надежде, что этот объект поможет мне найти индекс, необходимый для управления видимостью, и что я смогу поместить его в поле data файлаchart.js, чтобы он отображал каждый набор данных. Реализация этого была чрезвычайно сложной, и я постоянно сталкиваюсь с проблемами структурирования своих данных, что заставило меня задуматься, есть ли лучший способ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы имеете в виду диаграмму из 9 линий, представляющую все комбинации стран и культур? Я могу сделать это, используя «декартово произведение» стран и культур. Действительно, интерфейс сомнительный - возможно, стоит рассмотреть какие-то цвета - но в нем есть вся серия.
const ctx = document.getElementById('myChart');
var csvs = {}
var crops = ["corn", "potato", "carrot"]
var countries = ["canada", "us", "mexico"]
var combinations = cartesianProduct([countries, crops]);
// console.info(combinations)
// https://stackoverflow.com/a/36234242/3807365
function cartesianProduct(arr) {
return arr.reduce(function(a, b) {
return a.map(function(x) {
return b.map(function(y) {
return x.concat([y]);
})
}).reduce(function(a, b) {
return a.concat(b)
}, [])
}, [
[]
])
}
// generating random data
countries.forEach(function(country) {
csvs[country] = []
for (var year = 2015; year <= 2024; year++) {
var line = {}
line.year = year
crops.forEach(function(crop) {
line[crop] = Math.random() * 12000
})
csvs[country].push(line)
}
})
// datasets combinations
var datasets = []
var years
combinations.forEach(function(combination) {
var country = combination[0]
var crop = combination[1]
var csv = csvs[country]
years = csv.map(item => item.year)
var data = csv.map(item => item[crop])
var dataset = {
label: country + ' - ' + crop,
data: data,
borderWidth: 1,
}
datasets.push(dataset)
})
// the chart
new Chart(ctx, {
type: 'line',
data: {
labels: years,
datasets: datasets
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});<div>
<canvas id = "myChart"></canvas>
</div>
<script src = "https://cdn.jsdelivr.net/npm/chart.js"></script>Как вы себе представляете пользовательский интерфейс для этого? 6 флажков?
Подумал, что мне стоит вернуться к этому. 6 флажков — это тот пользовательский интерфейс, который я выбрал. Чтобы динамически включать и отключать категории, мы создали вспомогательный объект, который включал индекс каждого данных в наборе данных, и отфильтровал его, чтобы найти, какие индексы показывать/скрывать, с помощьюchart.setDataVisibility().
Большое спасибо за ваш ответ! Да, этот результат аналогичен тому, что мне удалось получить. Моя проблема в том, что я хотел бы контролировать видимость строк в зависимости от категории, и я не могу найти хороший способ сделать это. Я пытаюсь установить флажок с надписью «Канада», который будет показывать все канадские культуры, если он установлен, и скрывать все, если он не установлен. И то же самое для всех стран+всех культур. Таким образом, вы можете сравнить все культуры одной страны, или урожайность одной культуры во всех округах, или любую их комбинацию.