reactjs - CoreUI 图表类型 Bar- 可点击的条形链接到另一个页面
问题描述
我希望使用此处的 CoreUI 文档中提供的 CChartBar 创建向下钻取:https ://coreui.io/react/docs/3.3/components/CCharts/
我需要能够从被点击的栏中获取月份,当点击栏时,它需要将用户带到另一个页面。我如何获取信息?如何使每个栏可点击以将用户发送到表格页面?
目前这里是html
<div className="chart-container">
<CChartBar
datasets={[
{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]}
labels={dateLabels}
onClick={(event) => drillDown(event)}
options={{
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}}
/>
我希望能够单击该栏,并获取正在绘制的数据,这样我就可以将月份传递到另一个页面。
解决方案
您可以为此使用该onClick
功能:
var options = {
type: 'bar',
data: {
labels: ["December 2020", "Januarie 2021", "Feb 2021", "March 2021", "April 2021", "May 2021"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 3, 3],
backgroundColor: 'pink'
}]
},
options: {
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
<div className = "chart-container" >
<CChartBar
datasets = {
[{
label: "Expected Expirations",
type: "bar",
data: expectedExpirations,
backgroundColor: "#949fe8",
borderColor: "blue",
fill: true,
order: 2,
},
{
label: 'Actual Expirations',
type: "bar",
data: actualExpirations,
backgroundColor: '#556ad1',
borderColor: "blue",
fill: true,
order: 1,
},
{
label: 'Target Expirations',
backgroundColor: '#352c2c',
data: targetExpirations,
type: "line",
borderColor: "black",
fill: true,
order: 0,
borderWidth: 2,
fill: "#352c2c",
pointBackgroundColor: "#352c2c",
lineTension: 0,
}
]
}
labels = {
dateLabels
}
onClick = {
(event) => drillDown(event)
}
options = {
{
onClick: (evt, activeEls) => {
console.log(activeEls[0]._model.label)
console.log(activeEls[0]._model.label.split(" ")[0])
},
maintainAspectRatio: false,
responsive: true,
tooltips: {
enabled: true,
},
scales: {
xAxes: [{
stacked: true,
scaleLabel: {
display: true,
labelString: "Month"
}
}],
yAxes: [{
ticks: {
stacked: true,
beginAtZero: true,
stepValue: 10,
max: maxOfAllExpirations
},
scaleLabel: {
display: true,
labelString: "Number of Lease Expirations"
}
}]
},
}
}
/>
``
推荐阅读
- xml - 如何使用 match 属性获取具有特定名称的所有节点
- c# - 如何修复此错误“GDI+ 中发生一般错误”?
- python - 解析从 Google 表格获取的 CSV
- javafx - 需要帮助从高度图(JavaFX)创建三角形网格
- javascript - GraphQl 打字稿类查询/突变?
- javascript - 是否将表单输入保存到 onChange 中的状态或 React 中的 onSubmit
- elm - 尝试在同一节点中的两个嵌入式 Elm 应用程序之间切换失败
- ssl - 特定域的多个 SSL 证书 - Flask
- html - 如何在您的网页上显示对其他语言访问者的考虑?
- java - 计算二叉树的右节点