Question

我是Chart.js的新手。我设法构建了几个图表，但现在我想在它们之间实现某种交互。例如，当用户单击第一个图表中的一个列时，值应在另一个图表上更新。这是我到目前为止的代码。

这是我的js文件

var barChartData = {
                            labels : ["label1","label2","label3","label4"],

                            datasets : [              
                                {
                                    label: "My dataset",
                                    data:[{!currentMonth_3},{!currentMonth_2},{!currentMonth_1},{!currentMonth}],                                   
                                }]               
                           }

 var chartOptions={
                   "my chart's option"
                    }   


 var doughnutData = [
                    {
                        value: 20,             
                    },
                    {
                        value : 30,            
                    },
                    {
                        value : 40,       
                    },
                    {
                        value : 10,
                    }

                    ];


 var doughnutOptions = { 
                    "my Chart Options
                 }





      window.onload = function(){
                            var ctx = document.getElementById("barchart").getContext("2d");
                            var ctz = document.getElementById("doughnut").getContext("2d");

                            window.myBar = new Chart(ctx).Bar(barChartData,chartOptions);
                            window.myDoughnut = new Chart(ctz).Doughnut(doughnutData,doughnutOptions);
    }

这是我的HTML页面

<html>

  <head>
  </head>

    <body >
        <div id="wrapper" >

               <div id="header">
                  <h1>Title </h1>
               </div>

                <div id="main">  

                        <div id="top">
                             <div class="chart-legend">
                                  <h1 >Chart1 </h1>                   
                             </div>

                             <div class="canvas-container">
                               <canvas id="barchart"></canvas>
                             </div>

                         </div>


                        <div id="bottom">
                              <div id="left" >
                                      <div class="chart-legend">
                                         <h1 >Chart2</h1>             
                                       </div>
                                       <div class="canvas-container">
                                          <canvas id="doughnut"></canvas>
                                       </div>

                                  </div>


                            <div id="right">
                            </div>


                                  </div>

                          </div>

                     </div>

                 <div id="footer">
                 </div>

               </div>       
    </body>
</html>

我基本上有两张图表：

图1 - ＆gt; barchar
图2 - ＆gt; doughnutchart
当用户点击Chart1中的一列时，Chart2中的数据应该更改。

我代表我的坏缩进道歉。我编辑了这篇文章中的代码，使其更容易理解，因此一些代码部分可能是有效的工作形式。

ChartJS onClick（）事件更新不同的图表

0 个答案: