Я использую реагирующую диаграмму js -2 в своем проекте и создаю сгруппированную гистограмму с накоплением, чтобы удалить дублирующиеся метки. Я создал пользовательскую функцию generateLabels
, но проблема с пользовательской * Функция 1002 * заключается в том, что при нажатии на легенду диаграммы (ie. Cinema) она обновляет только правую (более высокую) диаграмму, а левая (меньшая) диаграмма не обновляется. Я знаю, что есть функция onClick
, но я не мог найти, как ее использовать:
onClick: (e, legendItem) => {
let i = legendItem.datasetIndex;
let ci = chRef.current.chartInstance;
}
<Bar data={data} width={100} height={50} options={options} ref={chRef} />
Есть ли какие-нибудь решения для этого? Я хочу, чтобы обе диаграммы (выше и меньше) были обновлены. Я выделил гистограмму, которая обновляется на этом изображении: ![t](https://i.stack.imgur.com/dSHK5.jpg)
Вот мой код
import React, { useRef } from "react";
import { Bar } from "react-chartjs-2";
const mocked_data = {
labels: ["Brand 1", "Brand 2", "Brand 3", "Brand 4", "Brand 5"],
spend_per_channel: {
spends: [
{
label: "Cinema",
data: [56, 23, 55, 56, 57]
},
{
label: "Retails",
data: [22, 17, 32, 47, 62]
},
{
label: "Fashion",
data: [46, 73, 25, 76, 27]
},
{
label: "Oil",
data: [26, 40, 80, 50, 62]
},
{
label: "Gas",
data: [36, 13, 35, 46, 67]
}
],
sales: [
{
label: "Cinema",
data: [156, 123, 155, 56, 157]
},
{
label: "Retail",
data: [122, 117, 132, 147, 162]
},
{
label: "Fashion",
data: [416, 173, 125, 176, 127]
},
{
label: "Oil",
data: [126, 135, 180, 100, 86]
},
{
label: "Gas",
data: [136, 113, 135, 146, 167]
}
]
}
};
const MyChart = () => {
const chRef = useRef(null);
const CHART_COLORS = [
"#e35b2c",
"#e77235",
"#eb8a40",
"#f0a04b",
"#f5b858",
"#f9cf63",
"#fde76e",
"#fced86",
"#ffffb7",
"#fefeeb"
];
const spendsdata = mocked_data.spend_per_channel.spends.map(
(spend, index) => {
return {
label: spend.label,
backgroundColor: CHART_COLORS[index],
data: spend.data,
stack: 1
};
}
);
const salesdata = mocked_data.spend_per_channel.sales.map((sale, index) => {
return {
label: sale.label,
backgroundColor: CHART_COLORS[index],
data: sale.data,
stack: 2
};
});
const newdataset = [spendsdata, salesdata];
const spnedperchanneldata = newdataset.flat();
const data = {
labels: ["Brand 1", "Brand 2", "Brand 3", "Brand 4", "Brand 5"],
datasets: spnedperchanneldata
};
const options = {
legend: {
position: "bottom",
labels: {
generateLabels: function(chart) {
return Chart.defaults.global.legend.labels.generateLabels
.apply(this, [chart])
.filter(function(item, i) {
return i > 4;
});
},
boxWidth: 10,
usePointStyle: true
},
onClick: (e, legendItem) => {
let i = legendItem.datasetIndex;
let ci = chRef.current.chartInstance;
}
}
};
return (
<>
<Bar data={data} width={100} height={50} options={options} ref={chRef} />
</>
);
};
export default MyChart;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Вы можете проверить живое демо в этом коде и демо
любая помощь, пожалуйста?