我知道這個問題充滿了疑問，但我有一個奇怪的場景：
最初我有一個 C3JS 餅圖，點擊需要生成另一個 C3JS 條形圖。直到這里它作業正常，沒有任何問題。單擊時的 C3JS 條形圖也應該生成另一個 C3Js 圖表。問題是當我單擊 C3JS 條形圖時，它給了我錯誤：
c3.min.js?v=1031:2 Uncaught TypeError: Cannot read properties of undefined (reading 'getItem');
這是我的帶有虛擬資料的代碼示例
var data1 = [
[
"setosa",
0.2,
0.2,
0.2,
0.2,
0.2,
0.4,
0.3,
0.2,
0.2,
0.1,
0.2,
0.2,
0.1,
0.1,
0.2,
0.4,
0.4,
0.3,
0.3,
0.3,
0.2,
0.4,
0.2,
0.5,
0.2,
0.2,
0.4,
0.2,
0.2,
0.2,
0.2,
0.4,
0.1,
0.2,
0.2,
0.2,
0.2,
0.1,
0.2,
0.2,
0.3,
0.3,
0.2,
0.6,
0.4,
0.3,
0.2,
0.2,
0.2,
0.2,
],
[
"versicolor",
1.4,
1.5,
1.5,
1.3,
1.5,
1.3,
1.6,
1.0,
1.3,
1.4,
1.0,
1.5,
1.0,
1.4,
1.3,
1.4,
1.5,
1.0,
1.5,
1.1,
1.8,
1.3,
1.5,
1.2,
1.3,
1.4,
1.4,
1.7,
1.5,
1.0,
1.1,
1.0,
1.2,
1.6,
1.5,
1.6,
1.5,
1.3,
1.3,
1.3,
1.2,
1.4,
1.2,
1.0,
1.3,
1.2,
1.3,
1.3,
1.1,
1.3,
],
[
"virginica",
2.5,
1.9,
2.1,
1.8,
2.2,
2.1,
1.7,
1.8,
1.8,
2.5,
2.0,
1.9,
2.1,
2.0,
2.4,
2.3,
1.8,
2.2,
2.3,
1.5,
2.3,
2.0,
2.0,
1.8,
2.1,
1.8,
1.8,
1.8,
2.1,
1.6,
1.9,
2.0,
2.2,
1.5,
1.4,
2.3,
2.4,
1.8,
1.8,
2.1,
2.4,
2.3,
1.9,
2.3,
2.5,
2.3,
1.9,
2.0,
2.3,
1.8,
],
];
var data2 = [
["data1", 30],
["data2", 120],
];
try {
c3.generate({
bindto: "#myChart",
pie: {
label: {
format: function (value, ratio, id) {
return value;
},
},
},
tooltip: {
format: {
value: function (value, ratio, id) {
var perc = `${parseFloat(ratio * 100).toFixed(1)}%`;
return value " (" perc ")";
},
},
},
data: {
columns: data1,
type: "pie",
onclick: function (event) {
console.log(event);
c3.generate({
bindto: "#myChart2",
legend: {
show: false,
},
axis: {
x: {
type: "category",
},
},
data: {
columns: data2,
type: "bar",
onclick: function (event2) {
myFunction(event2)
}
},
});
},
},
});
} catch (ex) {
console.log(ex);
}
function myFunction(event2){
console.log(event2)
}<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.8/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.8/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.4/d3.min.js"></script>
<div id="myChart"></div>
<div id="myChart2"></div>我擁有的版本：
C3js：0.4.8
D3js：3.4.4
為什么使用 C3JS 餅圖 onclick 事件可以正常作業，而使用 C3JS 條形圖它會給我這個錯誤？有什么解決方案可以解決這個問題嗎？
uj5u.com熱心網友回復：
問題是因為您使用的是非常過時的 C3JS 版本——它來自 2014 年！
您應該將該庫更新到最新版本，即 0.7.20。您還需要將 D3 更新到 v5 以保持支持。
var data1=[["setosa",.2,.2,.2,.2,.2,.4,.3,.2,.2,.1,.2,.2,.1,.1,.2,.4,.4,.3,.3,.3,.2,.4,.2,.5,.2,.2,.4,.2,.2,.2,.2,.4,.1,.2,.2,.2,.2,.1,.2,.2,.3,.3,.2,.6,.4,.3,.2,.2,.2,.2,],["versicolor",1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,],["virginica",2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8,],]
var data2 = [["data1", 30],["data2", 120]];
try {
c3.generate({
bindto: "#myChart",
pie: {
label: {
format: function(value, ratio, id) {
return value;
},
},
},
tooltip: {
format: {
value: function(value, ratio, id) {
var perc = `${parseFloat(ratio * 100).toFixed(1)}%`;
return value " (" perc ")";
},
},
},
data: {
columns: data1,
type: "pie",
onclick: function(event) {
c3.generate({
bindto: "#myChart2",
legend: {
show: false,
},
axis: {
x: {
type: "category",
},
},
data: {
columns: data2,
type: "bar",
onclick: myFunction
},
});
},
},
});
} catch (ex) {
console.log(ex);
}
function myFunction(event2) {
console.log(event2)
}<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>
<div id="myChart"></div>
<div id="myChart2"></div>如果您絕對必須保留 C3JS 的過時版本，那么您可以使用 polyfill 來解決此處可用的問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/504322.html
標籤：javascript jQuery d3.js c3.js