javascript - 当我单击饼图时，我的画布 Js 图上有一个函数，柱形图应该按照它行事
问题描述
当我单击饼图时，我试图动态更改我的柱形图。当我点击饼图时，我已经在我的画布 Js 图上创建了一个界面和一个函数，柱形图应该按照它行事，没有铃声
所以这是下面的代码
<a>https://jsfiddle.net/2kLwt70f/
按类别参考主题收入 https://canvasjs.com/samples/dashboards/web-analytics-real-time/overview/
解决方案
这段代码完成了这项工作：
$(function() {
var pieChartValues = [{
y: 39.16,
color: "#1f77b4",
name: "Apple",
},
{
y: 21.8,
indexLabel: "Grapes",
color: "#ff7f0e",
name: "Grapes",
},
{
y: 21.45,
indexLabel: "Banana",
color: "#ffbb78",
name: "Banana",
},
{
y: 5.56,
indexLabel: "Mango",
color: "#d62728",
name: "Mango",
},
{
y: 5.38,
indexLabel: "Orange",
color: "#98df8a",
name: "Orange",
},
];
var columnChartValues = [{
y: 686.04,
color: "#1f77b4",
},
{
y: 381.84,
color: "#ff7f0e",
},
{
y: 375.76,
color: "#ffbb78",
},
{
y: 97.48,
color: "#d62728",
},
{
y: 94.2,
color: "#98df8a",
},
{
y: 686.04,
color: "#1f77b4",
},
{
y: 381.84,
color: "#ff7f0e",
},
{
y: 375.76,
color: "#ffbb78",
},
{
y: 97.48,
color: "#d62728",
},
{
y: 94.2,
color: "#98df8a",
},
{
y: 686.04,
color: "#1f77b4",
},
{
y: 381.84,
color: "#ff7f0e",
},
{
y: 375.76,
color: "#ffbb78",
},
{
y: 97.48,
color: "#d62728",
},
{
y: 94.2,
color: "#98df8a",
},
];
var piechart;
renderColumnChart(columnChartValues);
renderPieChart(pieChartValues);
function renderPieChart(values) {
piechart = new CanvasJS.Chart("pieChart", {
title: {
text: "Pie Chart",
fontFamily: "Verdana",
fontSize: 25,
fontWeight: "normal",
},
legend: {
horizontalAlign: "left",
verticalAlign: "center",
},
animationEnabled: true,
data: [{
click: clickHandler,
indexLabelFontSize: 15,
indexLabelFontFamily: "Monospace",
indexLabelFontColor: "darkgrey",
indexLabelLineColor: "darkgrey",
indexLabelPlacement: "outside",
type: "pie",
legendMarkerType: "square",
showInLegend: true,
toolTipContent: "<strong>#percent%</strong>",
dataPoints: values,
}, ],
});
piechart.render();
}
function renderColumnChart(values) {
var columnchart = new CanvasJS.Chart("columnChart", {
title: {
text: "Multi-Series Column Chart",
fontFamily: "Verdana",
fontSize: 25,
fontWeight: "normal",
},
animationEnabled: true,
backgroundColor: "transparent",
axisX: {
interval: 2,
intervalType: "month",
labelFontColor: "#717171",
lineColor: "#a2a2a2",
tickColor: "#a2a2a2",
},
axisY: {
gridThickness: 0,
labelFontColor: "#717171",
lineColor: "#a2a2a2",
prefix: "$",
tickColor: "#a2a2a2",
},
toolTip: {
backgroundColor: "#737580",
borderThickness: 0,
cornerRadius: 0,
fontColor: "#ffffff",
fontSize: 16,
fontStyle: "normal",
shared: true,
},
data: [{
indexLabelFontSize: 15,
indexLabelFontFamily: "Monospace",
indexLabelFontColor: "darkgrey",
indexLabelLineColor: "darkgrey",
indexLabelPlacement: "outside",
type: "column",
dataPoints: values,
}, ],
});
columnchart.render();
}
function clickHandler(e) {
//keep all color of part of datas exploded
let colorsToKeep = [];
for (let i = 0; i < piechart.options.data[0].dataPoints.length; i++) {
if (piechart.options.data[0].dataPoints[i].exploded === true) {
let piecolor = piechart.options.data[0].dataPoints[i].color.trim();
columnChartValues.map(function(e) {
if (e.color.trim() == piecolor && !colorsToKeep.includes(piecolor)) colorsToKeep.push(piecolor);
});
}
}
let toKeep = [];
let idx = 0;
if (colorsToKeep.length > 0) {
columnChartValues.map(function(e) {
if (colorsToKeep.includes(e.color)) {
e.x = idx++;
toKeep.push(e);
}
});
} else {
// need to do that instead renderColumnChart(columnChartValues); maybe a bug?
columnChartValues.map(function(e) {
e.x = idx++;
toKeep.push(e);
});
}
renderColumnChart(toKeep);
}
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Analytics - Real Time</title>
<!-- stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div id="pieChart" style="height: 360px; width: 100%;">
</div>
</div>
<div class="col-md-6">
<div id="columnChart" style="height: 360px; width: 100%;">
</div>
</div>
</div>
</div>
</body>
</html>其他解决方案：
$(function () {
var chart1 = new CanvasJS.Chart("pieChart", {
title: {
text: "Pie Chart",
fontFamily: "Verdana",
fontSize: 25,
fontWeight: "normal"
},
legend: {
horizontalAlign: "left",
verticalAlign: "center",
fontFamily: "calibri",
fontSize: 14
},
tooltip: {
backgroundColor: "#737580",
fontColor: "#ffffff",
fontSize: 16,
fontStyle: "normal",
shared: false
},
animationEnabled: true,
data: [
{
click: onClick,
visible: true,
type: "pie",
showInLegend: true,
dataPoints: [
{ y: 39.16, color:"#1f77b4", name:"Apple"},
{ y: 21.8, color:"#ff7f0e", name:"Grapes" },
{ y: 21.45, color:"#ffbb78", name:"Banana"},
{ y: 5.56, color:"#d62728", name:"Mango"},
{ y: 5.38, color:"#98df8a", name:"Orange"}
]
}]
});
chart1.render();
var chart2 = new CanvasJS.Chart("columnChart", {
title: {
text: "Multi-Series Column Chart",
fontFamily: "Verdana",
fontSize: 25,
fontWeight: "normal",
},
tooltip: {
backgroundColor: "#737580",
fontColor: "#ffffff",
fontSize: 16,
fontStyle: "normal",
shared: false
},
animationEnabled: true,
data: [
{
visible: true,
type:"column",
color:"#1f77b4",
dataPoints: [
{ x: 10, y: 271 },
{ x: 20, y: 55 },
{ x: 30, y: 450 },
{ x: 40, y: 465 },
{ x: 50, y: 95 }
]},
{
visible: true,
type:"column",
color:"#ff7f0e",
dataPoints: [
{ x: 10, y: 121 },
{ x: 20, y: 225 },
{ x: 30, y: 650 },
{ x: 40, y: 565 },
{ x: 50, y: 155 }
]},
{
visible: true,
type:"column",
color:"#ffbb78",
dataPoints: [
{ x: 10, y: 281 },
{ x: 20, y: 185 },
{ x: 30, y: 50 },
{ x: 40, y: 165 },
{ x: 50, y: 195 }
]},
{
visible: true,
type:"column",
color:"#d62728",
dataPoints: [
{ x: 10, y: 81 },
{ x: 20, y: 55 },
{ x: 30, y: 350 },
{ x: 40, y: 145 },
{ x: 50, y: 125 }
]},
{
visible: true,
type:"column",
color:"#98df8a",
dataPoints: [
{ x: 10, y: 81 },
{ x: 20, y: 55 },
{ x: 30, y: 350 },
{ x: 40, y: 145 },
{ x: 50, y: 125 }
]}
]
});
chart2.render();
var pieData = chart1.options.data;
var columnData = chart2.options.data;
function onClick(e) {
if(e.dataPoint.exploded == false) {
columnData[e.dataPointIndex].visible = false;
var notVisible = columnData.every(function(dataSeries) {
return (!dataSeries.visible);
});
if(notVisible) {
for(var i = 0; i < columnData.length; i++) {
columnData[i].visible = true;
}
}
}
else {
for(var i = 0; i < columnData.length; i++) {
if(i == e.dataPointIndex || pieData[0].dataPoints[i].exploded == true)
columnData[i].visible = true;
else
columnData[i].visible = false;
}
}
chart2.render();
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Analytics - Real Time</title>
<!-- stylesheets -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div id="pieChart" style="height: 360px; width: 100%;">
</div>
</div>
<div class="col-md-6">
<div id="columnChart" style="height: 360px; width: 100%;">
</div>
</div>
</div>
</div>
</body>
</html>您的错误出现在这部分代码中：
var notVisible = columnData.every(function(dataSeries) {
return (!dataSeries.visible);
});
没有every 的等价物是：
var notVisible = true;
for(var i = 0; i < columnData.length;i++){
if(!columnData[i].visible) continue;
notVisible = false;
break;
}
帮助你了解js中的一些数组函数
// Here's a simple array of "person" objects
var people = [
{ name: "John", age: 20 },
{ name: "Mary", age: 35 },
{ name: "Arthur", age: 78 },
{ name: "Mike", age: 27 },
{ name: "Judy", age: 42 },
{ name: "Tim", age: 8 }
];
// filter is equivalent to Where
var youngsters = people.filter(function (item) {
return item.age < 30;
});
console.log("People younger than 30");
console.log(youngsters);
// map is equivalent to Select
var names = people.map(function (item) {
return item.name;
});
console.log("Just the names of people");
console.log(names);
// every is equivalent to All
var allUnder40 = people.every(function (item) {
return item.age < 40;
});
console.log("Are all people under 40?"); // false
console.log(allUnder40);
// some is equivalent to Any
var anyUnder30 = people.some(function (item) {
return item.age < 30;
});
console.log("Are any people under 30?");
console.log(anyUnder30); // true
// reduce is "kinda" equivalent to Aggregate (and also can be used to Sum)
var aggregate = people.reduce(function (item1, item2) {
return { name: '', age: item1.age + item2.age };
});
console.log("Aggregate age");
console.log(aggregate.age); // { age: 210 }
推荐阅读
- python - 如何只让超级用户编辑模型
- sql - 如何删除雪花中的所有 html 字符，不想在查询中包含所有 html 特殊字符（无硬编码）
- ruby-on-rails - 有没有办法通过在 Rails 中使用 Fast JSON API 来选择外部对象的一个属性？
- kubernetes - 在 POD 处于 RUNNING 状态后，kubernetes 事件中是否准备好探测？
- bash - 将 shell 脚本可选参数保存到外部文件
- sql - 需要两个表的 Oracle 查询连接
- react-native - 我正在尝试创建 bar 应用程序的启动画面，但我遇到了这种错误，请告诉我如何在 react-native 中修复这种错误
- docker - 有没有办法通过任务定义配置来轮换 AWS ECS 中的日志？
- kubernetes - 我想在 kubernetes yaml 文件中 apt-get install sysstat 命令
- javascript - 我收到错误 [ERR_HTTP_HEADERS_SENT]：当邮递员上的该命令发送到客户端后无法设置标头