如果油炸圈饼图切片上发生onclick事件,我会try 建立链接.我的数据源是3个数组,带有标签、值和url的id.

HTML:

<canvas id="pie-chart" style='display: none;'></canvas>

<!-- Php Arrays to JS -> PIE-CHARTDATA -->

<script type="text/javascript"> 

var chartIds = [[12,14,17,18]];

var chartValues = [[208.09,296.86,634.975,972.808]];

var chartLabels = [["BTC","AAPL","MSFT","ETH"]];

</script>

JS:

if (chartValues.length != 0 ) {
    document.getElementById("pie-chart").style.display= "block";
}
Chart.register(ChartDataLabels);

var chartValuesInt = [];
length = chartValues[0].length;
for (var i = 0; i < length; i++)
chartValuesInt.push(parseInt(chartValues[0][i]));

var data = [{
    data: chartValuesInt,
        chartIds,
    backgroundColor: [  
        "#f38000",
        "#5f44f5",
        "#333333",

    ],
    borderColor: "#000"
}];

var options = {
    borderWidth: 4,
    hoverOffset: 6,
    plugins: {
        legend: {
            display: false
        },
        tooltip: {
            enabled: false,
            
        },
        datalabels: {
            formatter: (value, ctx) => {
                let sum = 0;
                let dataArr = ctx.chart.data.datasets[0].data;

                dataArr.map(data => {
                    sum += data;
                });
                let percentage = (value*100 / sum).toFixed(2)+"%";

                return [ctx.chart.data.labels[ctx.dataIndex],
                percentage,   
                '$' + value ] ;
            },
            textAlign: 'center',
            color: '#fff',
            borderRadius: 50,
            padding:10,
            labels: {
                title: {
                    font: {
                        weight: 'bold',
                        size: '16px'
                    }
                },
            }  
        }
    },
    options:{
        onClick: (e, activeEls) => {
            let datasetIndex = activeEls[0].datasetIndex;
            let dataIndex = activeEls[0].index;
            let datasetLabel = e.chart.data.datasets[datasetIndex].label;
            let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
            console.log("In click", datasetLabel,  value);
            //link to url with:[chartIds]
          }
    }
};

//IMAGE CENTER
const image = new Image();
image.src = 'img/pie-home2.png';

const plugin = {
  id: 'custom_canvas_background_image',
  beforeDraw: (chart) => {
    if (image.complete) {
      const ctx = chart.ctx;
      const {top, left, width, height} = chart.chartArea;
      const x = left + width / 2 - image.width / 2;
      const y = top + height / 2 - image.height / 2;
      ctx.drawImage(image, x, y);
    } else {
      image.onload = () => chart.draw();
    }
  }
};

var ctx = document.getElementById("pie-chart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: chartLabels[0],
        datasets: data,
        chartIds
    },
    options: options,
    plugins: [plugin],
});

为什么onclick不起作用?

如何从事件发生的切片中获取具有正确索引的id?

我已经搜索过了,但找不到这两个问题的答案.

推荐答案

You onClick函数不起作用,因为您在options对象中定义了一个options对象,并将onClick放入其中.这不受支持.删除内部选项层时,它将起作用:

const options = {
  borderWidth: 4,
  hoverOffset: 6,
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: false,

    },
    datalabels: {
      formatter: (value, ctx) => {
        let sum = 0;
        let dataArr = ctx.chart.data.datasets[0].data;

        dataArr.map(data => {
          sum += data;
        });
        let percentage = (value * 100 / sum).toFixed(2) + "%";

        return [ctx.chart.data.labels[ctx.dataIndex],
          percentage,
          '$' + value
        ];
      },
      textAlign: 'center',
      color: '#fff',
      borderRadius: 50,
      padding: 10,
      labels: {
        title: {
          font: {
            weight: 'bold',
            size: '16px'
          }
        },
      }
    }
  },
  onClick: (e, activeEls) => {
    let datasetIndex = activeEls[0].datasetIndex;
    let dataIndex = activeEls[0].index;
    let datasetLabel = e.chart.data.datasets[datasetIndex].label;
    let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
    console.log("In click", datasetLabel, value);
    //link to url with:[chartIds]
  }
};

Javascript相关问答推荐

nPM审计始终发现0个漏洞

如何在加载的元数据上使用juserc和await中获得同步负载?

用户单击仅在JavaScript中传递一次以及其他行为

当promise 在拒绝处理程序被锁定之前被拒绝时,为什么我们会得到未捕获的错误?

如何修复循环HTML元素附加函数中的问题?

Spring boot JSON解析错误:意外字符错误

为什么promise对js中的错误有一个奇怪的优先级?

处理时间和字符串时MySQL表中显示的日期无效

Javascript json定制

在HTML语言中调用外部JavaScript文件中的函数

为什么我的自定义元素没有被垃圾回收?

获取';无法解决导入和导入";slick-carousel/slick/slick-theme.css";';错误

如何在FastAPI中为通过file:/URL加载的本地HTML文件启用CORS?

expo 联系人:如果联系人的状态被拒绝,则请求访问联系人的权限

当从其他文件创建类实例时,为什么工作线程不工作?

处理app.param()中的多个参数

AG-GRIDreact 显示布尔值而不是复选框

当S点击按钮时,我如何才能改变它的样式?

相对于具有选定类的不同SVG组放置自定义工具提示

如何为两条动态路由创建一个页面?