我发现了一个很好的例子,可以在chartjs. here的图例中得到前5个折线图。不幸的是,我不得不处理一个甜甜圈图,但我不知道如何转换这段代码来做到这一点。javascript不是我的“后藤”代码语言,我有点卡住了。有人能帮我做同样的“前5个最大的”图例或甜甜圈图吗?第一个
ccgok5k51#
对于futthere peeple和thnx到@user2057925和一些fiddeling得到它的工作:($theme_dark是一个变量,用于改变php中的颜色)
<script> const ass_data_dou = <?php echo json_encode(array_column($assarr, 'total_all')); ?>; const ass_labels_dou = <?php echo json_encode(array_column($assarr, 'name')); ?>; const pieGenerateLabelsLegendHandler = Chart.controllers.doughnut.overrides.plugins.legend.labels.generateLabels; const pieLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick; let others = []; var theme_dark = <?php echo json_encode($theme_dark); ?>; let color1 = "#666666" let color2 = "red" if (theme_dark) { color1 = "#CCCCCC" color2 = "blue" } const data_custom_dou = { labels: ass_labels_dou, datasets: [{ data: ass_data_dou, backgroundColor: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#0099c6', '#dd4477', '#66aa00', '#b82e2e', '#316395', '#994499', '#22aa99'] }], }; const optionsCustom_dou = { plugins: { title: { display: true, position: "top", text: "legend tit", color: color1, padding: { top: 5, bottom: 0 }, font: { size: 20 } }, legend: { position: "right", labels: { color: color1, font: { size: 20 }, generateLabels(chart) { const labels = pieGenerateLabelsLegendHandler(chart); const sorted = labels.sort((a, b) => chart.data.datasets[0].data[a.index] <= chart.data.datasets[0].data[b.index]); const top5 = sorted.filter((el, index) => index <= 5); others = sorted.filter((el, index) => index > 5); top5.push({text: 'Others', hidden: others[0].hidden}); return top5; } }, onClick(e, legendItem, legend) { if (legendItem.text === 'Others'){ const ci = legend.chart; others.forEach(function(item) { ci.toggleDataVisibility(item.index); }); ci.update(); return; } pieLegendClickHandler(e, legendItem, legend); } } } }; const chart_dou = new Chart("chart_dou_distrubution", { type: 'doughnut', data: data_custom_dou, options: optionsCustom_dou }); </script>
1条答案
按热度按时间ccgok5k51#
对于futthere peeple和thnx到@user2057925和一些fiddeling得到它的工作:($theme_dark是一个变量,用于改变php中的颜色)