如何使Chart.js中的饼图可点击(React-Native)

时间:2018-09-26 12:42:32

标签: javascript react-native chart.js chartjs-2.6.0 react-chartjs

我正在使用一个使chartjs在react-native上可用的库:

react-native-chartjs.

该图表运行良好,但是当我按饼图时,只会显示工具提示。 我想要的是创建自己的函数,该函数将加载弹出窗口,而不是chart.js提供的工具提示 你们会如何做?甚至可行吗? (我对本机反应还很陌生,如果这是一个愚蠢的问题,抱歉。)

图片: Chart

图表代码:

export const NutritionChart = (props) => {
return (
<Chart
  chartConfiguration={
  {
    type: 'polarArea',
    data: {
      labels: ['Fiber', 'Protein', 'Healthy Oil', 'Good Energy']‚
      datasets: [
        {
          label: '# of Votes',
          data: [ 50, 140, 90, 120 ],
          backgroundColor: backgroundColor,
          borderColor: borderColor,
          borderWidth: datasets.border,
          hoverBackgroundColor: hoverBackgroundColor,
        },
      ],
    },
    options: {
      layout: {
       padding: {
           top: options.layout.padding.top,
           bottom: options.layout.padding.bottom,
           }
       },
      scale: {
        display: false,
        ticks: {
          min:0,
          max:200,
        }
      },
      responsive: true,
      maintainAspectRatio: false,
    },
  }
  }
  defaultFontSize={10}
  />
 );
};

0 个答案:

没有答案