CoreUI 图表类型 Bar- 可点击的条形链接到另一个页面答案

【问题标题】：CoreUI Chart type Bar- clickable bars to link to another pageCoreUI 图表类型 Bar- 可点击的条形链接到另一个页面
【发布时间】：2021-10-24 21:43:08
【问题描述】：

我希望使用此处的 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"
                          }
                        }]
                      },
                    }}
                  />

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

【问题讨论】：

标签： reactjs chart.js core-ui

【解决方案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 中的 CChartBar 组件，这是一个要求。
你的意思是你只是将它添加到你已经拥有的选项对象中
那么，选项的哪一部分？最后一行使用 CTX 和选项创建新图表？我没有使用 chart.js，我使用的是扩展它的 CoreUI 组件，所以脚本部分对我来说没有意义。
我的代码和你的代码中只有 1 个选项对象。由于 coreui 使用 chart.js 绘制它应该工作相同，相同的选项对象，但看到更新的答案
我现在明白了。谢谢！仍然需要一些调整来获得我需要的链接，但我想我可以做到。