微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

当我点击饼图时，我的画布 Js 图上有一个功能，柱形图应该根据它进行操作

分类：编程问答

如何解决当我点击饼图时，我的画布 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,{
      y: 381.84,{
      y: 375.76,{
      y: 97.48,{
      y: 94.2,{
      y: 686.04,];

  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",backgroundColor: "transparent",axisX: {
        interval: 2,intervalType: "month",labelFontColor: "#717171",lineColor: "#a2a2a2",tickColor: "#a2a2a2",axisY: {
        gridThickness: 0,prefix: "$",toolTip: {
        backgroundColor: "#737580",borderThickness: 0,cornerRadius: 0,fontColor: "#ffffff",fontSize: 16,fontStyle: "normal",shared: true,data: [{
        indexLabelFontSize: 15,type: "column",});

    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",fontWeight: "normal"
  },legend: {
    horizontalAlign: "left",fontFamily: "calibri",fontSize: 14    
  },tooltip: {
    backgroundColor: "#737580",shared: false
  },data: [
    { 
      click: onClick,visible: 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",data: [
    {
      visible: true,type:"column",dataPoints: [
        { x: 10,y: 271 },{ x: 20,y: 55  },{ x: 30,y: 450 },{ x: 40,y: 465 },{ x: 50,y: 95  }
      ]},{ 
      visible: true,dataPoints: [ 
        { x: 10,y: 121  },y: 225  },y: 650  },y: 565  },y: 155  }
      ]},{
      visible: true,y: 281 },y: 185 },y: 50  },y: 165 },y: 195 }
      ]},y: 81  },y: 350 },y: 145 },y: 125 }
      ]},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);
});

没有每个的等价物是：

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 }

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot