我的多系列饼图是没有反映.我删除了缓存和浏览器的一切,但仍然没有得到显示.我在这里做错了什么?.
$(document).ready(function () {
var ctx = $("#multiChart").getContext('2d');
const DATA_COUNT = 5;
const NUMBER_CFG = { count: DATA_COUNT, min: 0, max: 100 };
const labels = Utils.months({ count: 7 });
const data = {
labels: ['Overall Yay', 'Overall Nay', 'Group A Yay', 'Group A Nay', 'Group B Yay', 'Group B Nay', 'Group C Yay', 'Group C Nay'],
datasets: [
{
backgroundColor: ['#AAA', '#777'],
data: [21, 79]
},
{
backgroundColor: ['hsl(0, 100%, 60%)', 'hsl(0, 100%, 35%)'],
data: [33, 67]
},
{
backgroundColor: ['hsl(100, 100%, 60%)', 'hsl(100, 100%, 35%)'],
data: [20, 80]
},
{
backgroundColor: ['hsl(180, 100%, 60%)', 'hsl(180, 100%, 35%)'],
data: [10, 90]
}
]
};
var myChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
responsive: true,
plugins: {
legend: {
labels: {
generateLabels: function (chart) {
// Get the default label list
const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
const labelsOriginal = original.call(this, chart);
// Build an array of colors used in the datasets of the chart
let datasetColors = chart.data.datasets.map(function (e) {
return e.backgroundColor;
});
datasetColors = datasetColors.flat();
// Modify the color and hide state of each label
labelsOriginal.forEach(label => {
// There are twice as many labels as there are datasets. This converts the label index into the corresponding dataset index
label.datasetIndex = (label.index - label.index % 2) / 2;
// The hidden state must match the dataset's hidden state
label.hidden = !chart.isDatasetVisible(label.datasetIndex);
// Change the color to match the dataset
label.fillStyle = datasetColors[label.index];
});
return labelsOriginal;
}
},
onClick: function (mouseEvent, legendItem, legend) {
// toggle the visibility of the dataset from what it currently is
legend.chart.getDatasetMeta(
legendItem.datasetIndex
).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
legend.chart.update();
}
},
tooltip: {
callbacks: {
label: function (context) {
const labelIndex = (context.datasetIndex * 2) + context.dataIndex;
return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
}
}
}
}
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.min.js"></script>
<div>
<canvas id="multiChart" width="400" height="600"></canvas>
</div>
我把所有这些js和外部引用放在@section Scripts{ }节中。它没有在div标签中呈现。请帮助我。
1条答案
按热度按时间pod7payv1#
逐步解决此问题:
1.将Chart.js版本更改为v3.9.1
1.从此link导入Utils库并将
Utils
更改为Samples.utils
1.将Chart.js上下文更改为
$("#multiChart")[0].getContext('2d')
。1.确保将
script
标记放在代码的末尾。