Вот мои ассоциативные данные массива для диаграммы. js Я пытаюсь добавить линейный график внутри гистограммы. но я не совсем понимаю, как добавить в нее новую диаграмму.
, поскольку мои наборы данных - это массив
const tmp_orders = [
{
"type": "import",
"year": 2020,
"total": 1
},
{
"type": "import",
"year": 2019,
"total": 0
},
{
"type": "import",
"year": 2018,
"total": 0
},
{
"type": "export",
"year": 2020,
"total": 0
},
{
"type": "export",
"year": 2019,
"total": 0
},
{
"type": "export",
"year": 2018,
"total": 0
}
],
const res = [];
const result = tmp_orders[0].map(function(obj) {
var tmp = []
Object.entries(obj).map(function([key, value]) {
tmp[key] = value
})
res.push(tmp)
});
console.log(res)
// get order type and sort
const types =[...new Set(res.map(v => v['type']))].sort();
// get order year and sort
const years =[...new Set(res.map(v =>v['year']))].sort();
// set order color and sort
const colors = ['#ff0000', '#6383ff'];
// data for target order chart
const target_data = types.map(type => ({
label: type,
data: years.map(year => {
const value = res.find(v => v['type'] == type && v['year'] == year );
return value['total'];
}),
backgroundColor: function(){
if(type === 'import'){
return '#ff0000'
}else if(type === 'export'){
return '#6383ff'
}
}
}))
const targetOrderCtx = $('#chart_target_order'),
optionOrder = {
maintainAspectRatio: false,
responsive: true,
title: {
display: true,
text: 'Target Order',
fontSize: 18,
fontColor: '#6383ff'
},
legend: {
display: true,
position: 'bottom'
},
animation: {
animateScale: true,
animateRotate: true
}
}
// create Target Order Chart
var chart_target_order = new Chart(targetOrderCtx, {
type: 'bar',
data: {
labels: years,
datasets: target_data
},
options: optionOrder
});
, если вы загляните внутрь моих наборов данных, вы обнаружите, что это массив. В основном я нахожу какое-то решение, например, добавление линейных диаграмм в ie наборов данных, но для меня это кажется невозможным.
EDIT 1
вот результат, который я хочу.