使用选择标签和多个画布使用 Chart.js 创建下拉选项

【问题标题】：Creating dropdown options with Chart.js using select tag and multiple canvas使用选择标签和多个画布使用 Chart.js 创建下拉选项
【发布时间】：2018-10-29 23:38:31
【问题描述】： 

var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
    type:'line',
    data: {
        labels: ["2000", "2005", "2010", "2015", "2018"],
        datasets: [{
            label: 'Vancouver Population Data',    
            data: [195000,2093000,2278000,2485000,2597000],
            borderColor: [
                'rgba(255,99,132,1)'
            ],
            backgroundColor:['rgba(255,200,200,0.3)'],
            borderWidth: 1,
            //borderDash:([3]),
            pointBackgroundColor:"red",
            pointBorderColor: "rgba(250,10,10,0.1)",
            pointBorderWidth:"10",
            pointStyle:"rectRounded",
            pointHoverBackgroundColor:"rgba(255,0,0,0.5)",
            pointHoverBorderColor: "rgba(255,255,100,0.7)",
            pointHoverRadius:"10",
            //showLine:false,
            //steppedLine:"false"
        }]
    },
    options: {
        title:{
            display:true,
            text:"Vancouver Population",
            fontSize:20,
            fontColor:"rgba(20,20,20,1)"
        },
        legend:{
            display:false,
            position:'right',
            labels:{
                fontColor:'#000'
        },
        },
        elements:{
            line:{
                tension:0, //disables bezier curves
            }
        },
        scales: {
            yAxes:[{
                ticks: {
                    beginAtZero:true,
                    callback: function(value,index,values){
                    return value + " people"
                }
                }   
                           
            }]
        },
        /*animation: {
        duration:0, // general animation time
    },*/
    hover:{
        animationDuration:0, // duration of animations when hovering an item
    },
        responsiveAnimationDuration:0, // animation duration after a resize
    }
});

// Precipitation
var ctx = document.getElementById("barChart");
var BarChart = new Chart(ctx, {
    type:'bar',
    data: {
        labels:["May 2017", "June 2017", "July 2017", "Aug 2017","Sep 2017","Oct 2017","Nov 2017","Dec 2017","Jan 2018","Feb 2018","Mar 2018","Apr 2018","May 2018"],
        datasets:[{
               label:"Precipitation Data",
                data:[102.2,46.4,1.8,5.0,29.4,114.8,197.0,170.6,249.4,105.8,111.8,134.8,1.4],
                backgroundColor: [
                    'rgba(255,99,132,0.5)',
                    'rgba(155,130,32,0.5)',
                    'rgba(105,9,132,0.5)',
                    'rgba(15,130,202,0.5)',
                    'rgba(15,250,252,0.5)',
                    'rgba(205,100,32,0.5)',
                    'rgba(0,205,0,0.5)',
                    'rgba(55,15,52,0.5)',
                    'rgba(255,0,0,0.5)',
                    'rgba(25,59,52,0.5)',
                    'rgba(0,100,55,0.5)',
                    'rgba(200,111,199,0.5)',
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(155,130,32,1)',
                    'rgba(105,9,132,1)',
                    'rgba(15,130,202,1)',
                    'rgba(15,250,252,1)',
                    'rgba(205,100,32,0.5)',
                    'rgba(0,205,0,1)',
                    'rgba(55,15,52,1)',
                    'rgba(255,0,0,1)',
                    'rgba(25,59,52,1)',
                    'rgba(0,100,55,1)',
                    'rgba(200,111,199,1)',
                ],
                borderWidth:"1",
                pointHoverBackgroundColor:"#fff",
                hoverBorderColor:"#fff",
             }]
    },
    options: {
        title:{
            display:true,
            text:"Vancouver Precipitation",
            fontSize:20,
            fontColor:"rgba(10,0,20,0.9)"
        },
            legend:{
            display:false,
            position:'right',
            labels:{
                fontColor:'#000'
        }
            },
        scales:{
            yAxes:[{
                ticks:{
                    beginAtZero:true,
                    callback: function(value,index,values){
                    return value + " mm"
                }
                }
            }]
        }
    },
});

// Ethnicity 
var ctx = document.getElementById("pieChart");
var PieChart = new Chart(ctx,{
    type:'pie',
    data:{
        labels:['European Candadian','Chinese','South Asia','Fillipino','Southeast Asian','Japanese','Latin American','Mixed visible minority','Korean','Aboriginal','West Asian','Black','Arab'],
        datasets:[{
            label:"Ethnicity",
            data:[46.2,27.7,6,6,3,1.7,1.6,1.5,1.5,2,1.2,1,0.5],
            backgroundColor: [
                    'rgba(255,99,132,0.5)',
                    'rgba(155,130,32,0.5)',
                    'rgba(105,9,132,0.5)',
                    'rgba(15,130,202,0.5)',
                    'rgba(15,250,252,0.5)',
                    'rgba(205,100,32,0.5)',
                    'rgba(0,205,0,0.5)',
                    'rgba(55,15,52,0.5)',
                    'rgba(255,0,0,0.5)',
                    'rgba(25,59,52,0.5)',
                    'rgba(0,100,55,0.5)',
                    'rgba(200,231,50,0.5)',
                    'rgba(155,22,30,0.5)',
            ], 
            borderColor:[
                    'rgba(255,99,132,0.5)',
                    'rgba(155,130,32,0.5)',
                    'rgba(105,9,132,0.5)',
                    'rgba(15,130,202,0.5)',
                    'rgba(15,250,252,0.5)',
                    'rgba(205,100,32,0.5)',
                    'rgba(0,205,0,0.5)',
                    'rgba(55,15,52,0.5)',
                    'rgba(255,0,0,0.5)',
                    'rgba(25,59,52,0.5)',
                    'rgba(0,100,55,0.5)',
                    'rgba(200,231,50,0.5)',
                    'rgba(155,22,30,0.5)',
            ],
            borderWidth:[1]
        }],
        cutoutPercentage:[0]             
        
    },
    options:{
        title:{
            display:true,
            text:"Vancouver Ethnicity",
            fontSize:"20",
            fontColor:"rgba(20,20,20,1)"    
        },
    }
});

// Radar
Chart.defaults.scale.ticks.beginAtZero = true;

var ctx = document.getElementById("radarChart");
var RadarChart = new Chart(ctx, {
    type:'radar',
    data:{
        labels:['Hiking','Sporting Events','Stanley Park','Skiing & Snowboarding','Beaches','eating'],
        datasets:[{
            label:"Male",
            data:['50','70','80','60','20','70'],
            backgroundColor:[
                'rgba(255,155,32,0.5)',
            ],
            borderWidth:1,
            pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
            pointHoverBackgroundColor:["black"],
            pointStyle:["triangle"]
        },
        {
            label:"Female",
            data:['60','30','80','20','50','60'],
            backgroundColor:[
                'rgba(155,15,132,0.5)',
            ],
            borderWidth:1,
            pointBackgroundColor:["yellow","black","green","white","skyblue","red"],
            pointHoverBackgroundColor:["black"],
            pointStyle:["triangle"]
        }
        ]
    },
    option:{
        title:{
        display:true,
        text:"Activities in Vancouver",
        fontSize:"20",
        fontColor:"rgba(10,0,20,0.9)"
        },
        legend:{
        display:false,
        position:'right',
        labels:{
            fontColor:'#000',
        }
            },
        scales:{
            scale: {
            }
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
 
 <select id="chartType">
            <option value="line">Population</option>
            <option value="bar">Precipitation</option>
            <option value="pie">Ethnicity</option>
            <option value="radar">Activity</option>
        </select>
        <div class="chart_container">
            <canvas id="lineChart"></canvas>
            <canvas id="barChart"></canvas>
            <canvas id="pieChart"></canvas>
            <canvas id="radarChart"></canvas>
        </div>

您好，我正在尝试为以下 chart.js 图表创建一个下拉选项。例如，当我单击饼图时，我想隐藏其余部分，只显示饼图。我查看了此处发布的示例，但它们都使用具有相同数据（值）的单个画布。我想使用 4 种不同类型的包含不同数据的画布。我很困惑我应该从哪里开始。感谢您的阅读。

【问题讨论】：

  • 在每个画布元素上放置一个点击处理程序。单击时，通过 css (display: none) 隐藏每个画布，然后显示 ('display:inherit`) 被单击的画布。
  • 抱歉，您能详细说明一下吗？我不希望元素上的单击处理程序，因为我想使用选择选项进行控制。如何连接它们？
  • 抱歉，在&lt;select&gt; 元素上放置一个更改事件处理程序。通过 css ( display: none ) 隐藏每个画布，然后显示 ( 'display:inherit` ) 被选中的画布。
  • 谢谢，那更清楚了。但是，当一个被选中的部分时，我被卡住了......

标签： javascript html select chart.js option


【解决方案1】：

&lt;select&gt; 元素有一个 options 数组和一个名为 selectedIndex 的属性。所以要获得选定的选项：

let select = document.querySelector('#chartType');
// concat Chart for the canvas ID
let chart = select.options[select.selectedIndex].value + 'Chart';

编辑 --------------------------------------------------- ----------------更正---^，在此处添加.value

然后抓取所有画布并隐藏除选定的画布之外的所有画布：

document.querySelectorAll('canvas')
.forEach(c => {c.style.display = (c.id === chart)? 'inherit' : 'none';})


let select = document.querySelector('#chartType');

select.addEventListener('change', showHide);

function showHide() {
  // concat Chart for the canvas ID
  let chart = this.options[select.selectedIndex].value + 'Chart';
    document.querySelectorAll('canvas')
    .forEach(c => {
      c.style.display = (c.id === chart) ? 'inherit' : 'none';
    })
}

var ctx = document.getElementById("lineChart");
var lineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["2000", "2005", "2010", "2015", "2018"],
    datasets: [{
      label: 'Vancouver Population Data',
      data: [195000, 2093000, 2278000, 2485000, 2597000],
      borderColor: [
        'rgba(255,99,132,1)'
      ],
      backgroundColor: ['rgba(255,200,200,0.3)'],
      borderWidth: 1,
      //borderDash:([3]),
      pointBackgroundColor: "red",
      pointBorderColor: "rgba(250,10,10,0.1)",
      pointBorderWidth: "10",
      pointStyle: "rectRounded",
      pointHoverBackgroundColor: "rgba(255,0,0,0.5)",
      pointHoverBorderColor: "rgba(255,255,100,0.7)",
      pointHoverRadius: "10",
      //showLine:false,
      //steppedLine:"false"
    }]
  },
  options: {
    title: {
      display: true,
      text: "Vancouver Population",
      fontSize: 20,
      fontColor: "rgba(20,20,20,1)"
    },
    legend: {
      display: false,
      position: 'right',
      labels: {
        fontColor: '#000'
      },
    },
    elements: {
      line: {
        tension: 0, //disables bezier curves
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value, index, values) {
            return value + " people"
          }
        }

      }]
    },
    /*animation: {
        duration:0, // general animation time
    },*/
    hover: {
      animationDuration: 0, // duration of animations when hovering an item
    },
    responsiveAnimationDuration: 0, // animation duration after a resize
  }
});

// Precipitation
var ctx = document.getElementById("barChart");
var BarChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["May 2017", "June 2017", "July 2017", "Aug 2017", "Sep 2017", "Oct 2017", "Nov 2017", "Dec 2017", "Jan 2018", "Feb 2018", "Mar 2018", "Apr 2018", "May 2018"],
    datasets: [{
      label: "Precipitation Data",
      data: [102.2, 46.4, 1.8, 5.0, 29.4, 114.8, 197.0, 170.6, 249.4, 105.8, 111.8, 134.8, 1.4],
      backgroundColor: [
        'rgba(255,99,132,0.5)',
        'rgba(155,130,32,0.5)',
        'rgba(105,9,132,0.5)',
        'rgba(15,130,202,0.5)',
        'rgba(15,250,252,0.5)',
        'rgba(205,100,32,0.5)',
        'rgba(0,205,0,0.5)',
        'rgba(55,15,52,0.5)',
        'rgba(255,0,0,0.5)',
        'rgba(25,59,52,0.5)',
        'rgba(0,100,55,0.5)',
        'rgba(200,111,199,0.5)',
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(155,130,32,1)',
        'rgba(105,9,132,1)',
        'rgba(15,130,202,1)',
        'rgba(15,250,252,1)',
        'rgba(205,100,32,0.5)',
        'rgba(0,205,0,1)',
        'rgba(55,15,52,1)',
        'rgba(255,0,0,1)',
        'rgba(25,59,52,1)',
        'rgba(0,100,55,1)',
        'rgba(200,111,199,1)',
      ],
      borderWidth: "1",
      pointHoverBackgroundColor: "#fff",
      hoverBorderColor: "#fff",
    }]
  },
  options: {
    title: {
      display: true,
      text: "Vancouver Precipitation",
      fontSize: 20,
      fontColor: "rgba(10,0,20,0.9)"
    },
    legend: {
      display: false,
      position: 'right',
      labels: {
        fontColor: '#000'
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value, index, values) {
            return value + " mm"
          }
        }
      }]
    }
  },
});

// Ethnicity 
var ctx = document.getElementById("pieChart");
var PieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['European Candadian', 'Chinese', 'South Asia', 'Fillipino', 'Southeast Asian', 'Japanese', 'Latin American', 'Mixed visible minority', 'Korean', 'Aboriginal', 'West Asian', 'Black', 'Arab'],
    datasets: [{
      label: "Ethnicity",
      data: [46.2, 27.7, 6, 6, 3, 1.7, 1.6, 1.5, 1.5, 2, 1.2, 1, 0.5],
      backgroundColor: [
        'rgba(255,99,132,0.5)',
        'rgba(155,130,32,0.5)',
        'rgba(105,9,132,0.5)',
        'rgba(15,130,202,0.5)',
        'rgba(15,250,252,0.5)',
        'rgba(205,100,32,0.5)',
        'rgba(0,205,0,0.5)',
        'rgba(55,15,52,0.5)',
        'rgba(255,0,0,0.5)',
        'rgba(25,59,52,0.5)',
        'rgba(0,100,55,0.5)',
        'rgba(200,231,50,0.5)',
        'rgba(155,22,30,0.5)',
      ],
      borderColor: [
        'rgba(255,99,132,0.5)',
        'rgba(155,130,32,0.5)',
        'rgba(105,9,132,0.5)',
        'rgba(15,130,202,0.5)',
        'rgba(15,250,252,0.5)',
        'rgba(205,100,32,0.5)',
        'rgba(0,205,0,0.5)',
        'rgba(55,15,52,0.5)',
        'rgba(255,0,0,0.5)',
        'rgba(25,59,52,0.5)',
        'rgba(0,100,55,0.5)',
        'rgba(200,231,50,0.5)',
        'rgba(155,22,30,0.5)',
      ],
      borderWidth: [1]
    }],
    cutoutPercentage: [0]

  },
  options: {
    title: {
      display: true,
      text: "Vancouver Ethnicity",
      fontSize: "20",
      fontColor: "rgba(20,20,20,1)"
    },
  }
});

// Radar
Chart.defaults.scale.ticks.beginAtZero = true;

var ctx = document.getElementById("radarChart");
var RadarChart = new Chart(ctx, {
  type: 'radar',
  data: {
    labels: ['Hiking', 'Sporting Events', 'Stanley Park', 'Skiing & Snowboarding', 'Beaches', 'eating'],
    datasets: [{
        label: "Male",
        data: ['50', '70', '80', '60', '20', '70'],
        backgroundColor: [
          'rgba(255,155,32,0.5)',
        ],
        borderWidth: 1,
        pointBackgroundColor: ["yellow", "black", "green", "white", "skyblue", "red"],
        pointHoverBackgroundColor: ["black"],
        pointStyle: ["triangle"]
      },
      {
        label: "Female",
        data: ['60', '30', '80', '20', '50', '60'],
        backgroundColor: [
          'rgba(155,15,132,0.5)',
        ],
        borderWidth: 1,
        pointBackgroundColor: ["yellow", "black", "green", "white", "skyblue", "red"],
        pointHoverBackgroundColor: ["black"],
        pointStyle: ["triangle"]
      }
    ]
  },
  option: {
    title: {
      display: true,
      text: "Activities in Vancouver",
      fontSize: "20",
      fontColor: "rgba(10,0,20,0.9)"
    },
    legend: {
      display: false,
      position: 'right',
      labels: {
        fontColor: '#000',
      }
    },
    scales: {
      scale: {}
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>

<select id="chartType">
  <option value="line">Population</option>
  <option value="bar">Precipitation</option>
  <option value="pie">Ethnicity</option>
  <option value="radar">Activity</option>
</select>
<div class="chart_container">
  <canvas id="lineChart"></canvas>
  <canvas id="barChart"></canvas>
  <canvas id="pieChart"></canvas>
  <canvas id="radarChart"></canvas>
</div>

【讨论】：

  • 谢谢！底部出现的那些灰线是什么？
  • 我在 console.log() 进行测试以检查我的假设。我删除了。
  • 啊，我明白了。 .forEach(c => { c.style.display = (c.id === chart)
  • 这是为每个画布执行的arrow function（ c 被传递给函数）。对于每个canvas 元素；将显示 CSS 属性设置为“无”或“继承”；如果条件（画布 id 完全等于“图表”变量的内容）为真，则显示画布（使用继承），否则隐藏画布（使用“无”）。
  • 啊...我在哪里可以找到 using 的参考？ " " : " " ;非常感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-12-09
  • 2018-05-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode