第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

React ChartJS 2：點(diǎn)擊圖表獲取數(shù)據(jù)

React ChartJS 2：點(diǎn)擊圖表獲取數(shù)據(jù)

富國滬深 2022-11-11 13:20:50
我在 StackOverflow 和 GitHub 上發(fā)現(xiàn)了許多其他問題，但沒有一個(gè)對(duì)我有用......我有一個(gè)使用 ChartJS 構(gòu)建的圖表。當(dāng)我單擊任何條（橙色、綠色或紅色）時(shí)，我想獲得相應(yīng)的值。有什么辦法可以做到這一點(diǎn)？我使用的 npm 包是 react-chartjs-2。它有 2 個(gè)道具，我發(fā)現(xiàn)它們可能會(huì)有所幫助，但在這種情況下不知道如何使用它。它們是getElementsAtEvent和onElementsClick。這些道具在使用時(shí)會(huì)提供大量數(shù)據(jù)，除了我剛剛單擊的欄的值。這就是我導(dǎo)入組件的方式import { Bar } from "react-chartjs-2";這就是我使用組件的方式<Bar  data={barData}  height={275}  options={{    maintainAspectRatio: false,    scales: {      yAxes: [        {          ticks: {            beginAtZero: true,          },        },      ],    },  }}/>;而變量barData如下：const barData = {  labels: [    "04-07-2020",    "05-07-2020",    "06-07-2020",    "07-07-2020",    "08-07-2020",    "09-07-2020",    "10-07-2020",  ],  datasets: [    {      label: "Cases",      borderWidth: 1,      backgroundColor: "#ffc299",      borderColor: "#cc5200",      hoverBackgroundColor: "#ed873e",      hoverBorderColor: "#e35f00",      data: [673165, 697413, 719664, 742417, 767296, 793802, 820916],    },    {      label: "Recovered",      borderWidth: 1,      backgroundColor: "#b3ffb3",      borderColor: "#00ff00",      hoverBackgroundColor: "#55cf72",      hoverBorderColor: "#2c9c46",      data: [409083, 424433, 439934, 456831, 476378, 495513, 515386],    },    {      label: "Deaths",      borderWidth: 1,      backgroundColor: "#de8078",      borderColor: "#fa6457",      hoverBackgroundColor: "#d73627",      hoverBorderColor: "#ff4636",      data: [19268, 19693, 20159, 20642, 21129, 21604, 22123],    },  ],};這是圖表
查看完整描述

3 回答

?
寶慕林4294392

TA貢獻(xiàn)2021條經(jīng)驗(yàn) 獲得超8個(gè)贊

由于您的數(shù)據(jù)是以某種方式構(gòu)建的，因此當(dāng)單擊某個(gè)條形時(shí)，將返回一個(gè)大小為 3 的數(shù)組，即elem. 您可以根據(jù)需要從那里提取數(shù)據(jù)。


使用onElementsClick：


<Bar

  data={barData}

  height={275}

  onElementsClick={elem => {

    var data = barData.datasets[elem[0]._datasetIndex].data;

    console.log("Cases", data[elem[0]._index]);


    data = barData.datasets[elem[1]._datasetIndex].data;

    console.log("Recovered", data[elem[1]._index]);


    data = barData.datasets[elem[2]._datasetIndex].data;

    console.log("Deaths", data[elem[2]._index]);

  }}

  options={{

    maintainAspectRatio: false,

    scales: {

      yAxes: [

        {

          ticks: {

            beginAtZero: true,

          },

        },

      ],

    },

  }}

/>;

elem填充有單擊的元素。您可能需要稍微調(diào)整此代碼，以根據(jù)您要對(duì)該數(shù)據(jù)執(zhí)行的操作來準(zhǔn)確實(shí)現(xiàn)您正在尋找的內(nèi)容。評(píng)論中的沙盒。


查看完整回答
反對(duì) 回復(fù) 2022-11-11
?
呼喚遠(yuǎn)方

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊

onClick您可以在圖表選項(xiàng)中定義一個(gè)函數(shù)。


onClick: (event, elements) => {

  const chart = elements[0]._chart;

  const element = chart.getElementAtEvent(event)[0];

  const dataset = chart.data.datasets[element._datasetIndex];

  const xLabel = chart.data.labels[element._index];

  const value = dataset.data[element._index];

  console.log(dataset.label + " at " + xLabel + ": " + value);

}

請(qǐng)?jiān)谙旅娴?a >StackBlitz中查看您修改后的代碼。



查看完整回答
反對(duì) 回復(fù) 2022-11-11
?
LEATH

TA貢獻(xiàn)1936條經(jīng)驗(yàn) 獲得超7個(gè)贊

看來，onElementsClick 在 chart-js-2 ver.>3 中已被棄用 你貓?jiān)囋囘@個(gè)：


<Bar

  data={data}

  options={options}

  getElementAtEvent={(elements, event) => {

    if (event.type === "click" && elements.length) {

      console.log(elements[0]);

    }

  }}

/>


查看完整回答
反對(duì) 回復(fù) 2022-11-11
  • 3 回答
  • 0 關(guān)注
  • 144 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)