javascript - 使用选择标签和多个 Canvas 使用 Chart.js 创建下拉选项

标签 javascript html chart.js html-select 

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 图表创建一个下拉选项。例如，当我单击饼图时，我想隐藏其余部分并只显示饼图。我查看了此处发布的示例，但它们都使用具有相同数据(值)的单个 Canvas 。我想使用 4 种包含不同数据的不同类型的 Canvas 。我很困惑我应该从哪里开始。感谢您的阅读。

最佳答案

<select>元素有一个数组 options和一个名为 selectedIndex 的属性.所以要获得选择的选项:

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

编辑 ------------------------------------ --------------更正---^，添加.value这里

然后抓取所有 Canvas 并隐藏除选定的 Canvas 之外的所有 Canvas :

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>

关于javascript - 使用选择标签和多个 Canvas 使用 Chart.js 创建下拉选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50429785/

上一篇：php - 在服务器上找不到 .php 请求的 URL

下一篇：html - 带有 flexbox 的粘性页脚

相关文章：

javascript - 如何在 MS CRM 2013 中创建内联对话框

javascript - 通过下拉列表和用户输入和 javascript 将英制值转换为公制

javascript - 根据下拉选择生成输入框

javascript - inputVal 上的 Math.pow()

javascript - 使用 Charts.Js 在条形图中加载 800 多个数据集时，Firefox 没有响应

javascript - ASP.NET CodeBehind 无法识别 TinyMCE Textarea 更改

javascript - 按钮在第一次点击时不起作用

html - 我可以更改分配给 Bootstrap 生成的表的类吗？

javascript - ChartJs 强制散点图为正方形

javascript - 允许在其标签中使用 HTML 标签的圆环图 JS/Jquery？

©2024 IT工具网  联系我们