CoreUI 图表类型 Bar- 可点击的条形图 link 到另一个页面

Question

我希望使用此处 CoreUI 文档中提供的 CChartBar 创建下钻：https://coreui.io/react/docs/3.3/components/CCharts/

我需要能够从被点击的栏中获取月份，当栏被点击时，它需要将用户带到另一个页面。我如何获取信息？如何使每个栏可点击以将用户发送到 table 页面？

目前这里是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"
                          }
                        }]
                      },
                    }}
                  />

我希望能够单击该栏并获取正在绘制图表的数据，这样我就可以将月份传递到另一个页面。

Answer 1

您可以为此使用 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"
        }
      }]
    },
  }
}
/>
``

CoreUI 图表类型 Bar- 可点击的条形图 link 到另一个页面

CoreUI Chart type Bar- clickable bars to link to another page

reactjs

chart.js

core-ui