水平图表更改颜色

时间：2017-09-10 01:11:55

标签： javascript charts

我需要使用chartjs的帮助。我能够创建一个水平图表enter image description here

但我需要让它们看起来像这样。

enter image description here

水平条应分为四个部分。我不确定它是否可能。到目前为止，这是我的代码。请帮忙。我有人可以推荐如何让它以这种方式工作的想法，这将是一个很大的帮助。

function createCharts(){
  var myDoughnutChart = new Chart(document.getElementById("gender_chart"), {
    type: 'horizontalBar',
    data: {
      labels: ["Male", "Female"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [44,56]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Gender'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("age_chart"), {
    type: 'horizontalBar',
    data: {
      labels: ["20-29", "30-39", "40-49", "50-59"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [35,25,30,10]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Age Group'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("tenure_chart"), {
    type: 'doughnut',
    data: {
      labels: ["1 yr and below", "2 years", "3 years +"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [33,48, 19]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Agent Tenure'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("ccbg_chart"), {
    type: 'doughnut',
    data: {
      labels: ["With", "Without"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [72,28]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Call Center Background'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("educ_chart"), {
    type: 'doughnut',
    data: {
      labels: ["Primary", "Secondary", "Bachelor", "Doctorate"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [11,36,48,5]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Educational Background'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("mset_chart"), {
    type: 'doughnut',
    data: {
      labels: ["MSET1", "MSET2", "MSET3", "MSET4", "MSET5" ],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [20,13,43,10,14]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'MSET'
      }
    }
  });
}

function updateCharts(){

	var month = document.getElementById('month_select').options[document.getElementById('month_select').selectedIndex].value;
	var month2 = document.getElementById('month_select').options[document.getElementById('month_select').selectedIndex].text;

	var male;
	var female;

	if ((month == 1) | (month == 3) | (month == 5) | (month == 7) | (month == 9) | (month == 11)){
		male=52;
    female=48;

		age1=20;
		age2=30;
		age3=45;
		age4=5;

		tenure1=13;
		tenure2=40;
		tenure3=47;

		with_bg=13;
		without_bg=87;

		educ1=12;
		educ2=25;
		educ3=40;
		educ4=33;

		mset1=10;
		mset2=20;
		mset3=30;
		mset4=30;
		mset5=10;

	} else {
		male=39;
		female=61;

		age1=15;
		age2=35;
		age3=20;
		age4=30;

		tenure1=38;
		tenure2=50;
		tenure3=12;

		with_bg=28;
		without_bg=72;

		educ1=50;
		educ2=3;
		educ3=22;
		educ4=25;

		mset1=3;
		mset2=12;
		mset3=15;
		mset4=50;
		mset5=20;
	}

  var myDoughnutChart = new Chart(document.getElementById("gender_chart"), {
    type: 'doughnut',
    data: {
      labels: ["Male", "Female"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [male,female]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Gender'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("age_chart"), {
    type: 'doughnut',
    data: {
      labels: ["20-29", "30-39", "40-49", "50-59"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [age1,age2,age3,age4]
      }
    ]},
    options: {
      title: {
        display: true,
        text: 'Age Group'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("tenure_chart"), {
    type: 'doughnut',
    data: {
      labels: ["1 yr and below", "2 years", "3 years +"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [tenure1,tenure2, tenure3]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Agent Tenure'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("ccbg_chart"), {
    type: 'doughnut',
    data: {
      labels: ["With", "Without"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [with_bg,without_bg]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Call Center Background'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("educ_chart"), {
    type: 'doughnut',
    data: {
      labels: ["Primary", "Secondary", "Bachelor", "Doctorate"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [educ1,educ2,educ3,educ4]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Educational Background'
      }
    }
  });

  var myDoughnutChart = new Chart(document.getElementById("mset_chart"), {
    type: 'doughnut',
    data: {
      labels: ["MSET1", "MSET2", "MSET3", "MSET4", "MSET5" ],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#D98880","#F8C471","#D35400","#34495E","#641E16"],
        data: [mset1,mset2,mset3,mset4,mset5]
      }]
    },
    options: {
      title: {
        display: true,
        text: 'MSET'
      }
    }
  });
}

function crtbtnMonth() {
  var month2 = document.getElementById('month_select').options[document.getElementById('month_select').selectedIndex].text;

	var btn = document.createElement("BUTTON");
	var container = document.createElement("div");
	container.className = "btn_container";
  var t = document.createTextNode(month2);
  container.appendChild(t);
  btn.appendChild(container);
  document.getElementById("CreatedBtn").appendChild(btn);
}

function crtbtnModality() {
	var Modality = document.getElementById('modality_select').options[document.getElementById('modality_select').selectedIndex].text;

	var btn = document.createElement("BUTTON");
	var container = document.createElement("div");
	container.className = "btn_container";
  var t = document.createTextNode(Modality);
  container.appendChild(t);
  btn.appendChild(container);
  document.getElementById("CreatedBtn").appendChild(btn);
}

function crtbtnAccount() {
  var Account = document.getElementById('account_select').options[document.getElementById('account_select').selectedIndex].text;

  var btn = document.createElement("BUTTON");
  var container = document.createElement("div");
  container.className = "btn_container";
  var t = document.createTextNode(Account);
  container.appendChild(t);
  btn.appendChild(container);
  document.getElementById("CreatedBtn").appendChild(btn);
}

function crtbtnLOB() {
  var LOB = document.getElementById('lob_select').options[document.getElementById('lob_select').selectedIndex].text;
  var btn = document.createElement("BUTTON");
  var container = document.createElement("div");
  container.className = "btn_container";
  var t = document.createTextNode(LOB);
  container.appendChild(t);
  btn.appendChild(container);
  document.getElementById("CreatedBtn").appendChild(btn);
}

function crtbtnZone() {
  var Zone = document.getElementById('zone_select').options[document.getElementById('zone_select').selectedIndex].text;

  var btn = document.createElement("BUTTON");
  var container = document.createElement("div");
  container.className = "btn_container";
  var t = document.createTextNode(Zone);
  container.appendChild(t);
  btn.appendChild(container);
  document.getElementById("CreatedBtn").appendChild(btn);
}
* {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	font-family: "verdana";
}

header{
	text-align: left;
	padding: 20px;
	background-color: #6495ED;
	font-family: "verdana";
}

header h1{
	color: #ffffff;
	text-transform: uppercase;
	font-size: 19px;
    font-weight: 500;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

.main_menu {
	float: left;
	width: 100%;
}

.main_menu li{
	float: left;
	padding: 10px;
}

.body_inner {
	max-width: 1400px;
	margin: auto;
	margin-top: 20px;
	padding: 0px 20px;
}

.drop_selection {
	text-align: left;
}

.chartContainer {
	width: 100%;
	max-width: 1000px;
	margin: auto;
	text-align: center;
}

.chartContainer .chart_single{
	display: inline-block;
	width: 32.5%;	
	margin: auto;
	padding: 20px;
	text-align: center;
	
}

.chartContainer .chart_single canvas{
	background-color: #e8e8e8;
	padding: 10px;
}

#CreatedBtn {
	width: 100%;
	padding: 20px 0;

}

#CreatedBtn:first-child {
	margin-left:0px;
}

#CreatedBtn button {
	float: left;
	border: none;
	background-color:transparent;
	margin: 5px;
}

#CreatedBtn button .btn_container{
	padding: 5px 10px;
	background-color: #888888;
}

/* PIP Page */

.charts_header_divs {
	margin-top: -20px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	background-color: #333333;
	width: 28%;
}

.pip_charts_container {
	width: 100%;
    float: left;
    margin: 20px 0px;
    border-bottom: 5px solid #333333;
    padding-bottom: 20px;
}

.pip_charts_container .days_column{
	display: inline-block;
	width: 28%;
	float: left;
	background-color: #efefef;
	height: 250px;
    padding: 0px 20px;
    padding-left: 0px; 
}

.pip_charts_container .days_column .charts_header_div{
	text-align: center;
	color: #ffffff;
	text-transform: uppercase;
	background-color: #1995ad;
	padding: 10px;
	border-radius: 10px 10px 0px 0px;
}

.pip_charts_container .days_column_inner{
	display: inline-block;
	float: left;
	background-color: #bcbabe;
	height: 250px;
    padding: 20px;
    padding-left: 0px; 
}

.pip_charts_container .days_column .days_row{
	width: 100%;
	float: left;
	font-size: 14px;
	margin-bottom: 10px;
}

.pip_charts_container .days_column .days_row .days_label{
	width: 48%;
	float: left;
	text-align: center;
	padding-left: 60px;
	
}

.pip_charts_container .days_column .days_row .days_label div{
	text-align: center;
	width: 40px;
	height: 40px;
	padding-top: 10px;
	margin: auto;
	float: left;
}

.pip_charts_container .days_column .days_row .days_label div:first-child{
	text-align: center;
	border: 1px solid #336b87;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	padding-top: 10px;
	margin: auto;
	float: left;
	font-size: 14px;
	margin-right: 10px;
	font-weight: 500;
	color: #ffffff;
	background-color: #90afc5; 
}

.pip_charts_container .days_column .days_row .days_counter{
	width: 48%;
	float: left;
	text-align: center;
}

.pip_charts_container .days_column .days_row .days_counter div{
	text-align: center;
	padding: 10px;
	border: 1px solid #90afc5;
	margin: auto;
	width: 80px;
	border-radius: 5px;
	background-color: #80bd9e;
	color: #ffffff;
}

.charts_column .charts_header_div{
	text-align: center;
	color: #ffffff;
	text-transform: uppercase;
	
	float: left;
}

.charts_column .charts_header_div div{
	border-radius: 0px 10px 0px 0px;
	float: left;
	margin-right: 2px;	
	background-color: #1995ad;
	padding: 10px;
	font-size: 12px;
	font-weight: 500;
}

.pip_charts_container .charts_column_inner{
	display: inline-block;
	width: 70%;
	float: left;
	padding: 15px;
	border: 2px solid #888888;
}

.pip_charts_container .charts_column .charts_header{
	float: left;
	height: 20px;
}

.pip_charts_container .charts_column .charts_header div{
	float: left;
}

.pip_charts_container .charts_column .charts_container1 {
	width: 49%;
	float: left;
}

.pip_charts_container .charts_column .charts_container1 .days_chart_single{
	width: 49%;
	float: left;
}

.pip_charts_container .charts_column .charts_container2 .days_chart_single .chart_name{
	text-align: center;
	font-size: 14px;
	height: 45px;
}

.pip_charts_container .charts_column .charts_container1 .boxes{
	width: 49%;
	float: left;	
	margin-top: 30px;
}

.pip_charts_container .charts_column .charts_container1 .boxes .box_single{
	float: left;
	width: 49%;
	border: 1px solid #888888;
    text-align: center;
    font-size: 10px;
    text-transform: capitalize;
    padding: 20px 10px;
}

.pip_charts_container .charts_column .charts_container2 {
	width: 49%;
	float: left;
}

.pip_charts_container .charts_column .charts_container2 .days_chart_single{
	width: 49%;
	float: left;
}


.emp_table {
	width: 100%;
}

.emp_table .empheader{
	background-color: #1995ad;
	color: #ffffff;
	font-size: 12px;
    padding: 10px 2px;
    height: 50px;
    text-align: left;
    margin-top: 20px;
}
.emp_table .empheader:first-child{
	border-radius: 5px 0px 0px 0px;
}

.emp_table .empheader:last-child{
	border-radius: 0px 5px 0px 0px;
}

.emp_row {
	width: 100%;
	float: left;
	font-size: 12px;
	margin-bottom: 10px;
}

.emp_row .empcol1{
	width: 8%;
}

.emp_row .empcol2{
	width: 8%;
}

.emp_row .empcol3{
	width: 8%;
}

.emp_row .empcol4{
	width: 8%;
}

.emp_row .empcol5{
	width: 9%;
}

.emp_row .empcol6{
	width: 8%;
}

.emp_row .empcol7{
	width: 8%;
}

.emp_row .empcol8{
	width: 8%;
}

.emp_row .empcol9{
	width: 8%;
}

.emp_row .empcol10{
	width: 10%;
}

.emp_row .empcol11{
	width: 8%;
}

.emp_row .empcol12{
	width: 8%;
}

.emp_row div{
  float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<script src="functions.js"></script>

<header><h1>Performance Management Tool > P1 </h1></header>
<div class="body_inner">
  <div class="charts_header_div">Pending Enrollment</div>
  <div class="drop_selection">
    <div id="output"></div>
    <form>
      <select id = "month_select" name="month" onchange="updateCharts();crtbtnMonth()">
        <option value="0">All</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <select id = "Modality_select" name="modality" onchange="updateCharts();crtbtnModality()">
        <option value="0">All</option>
        <option value="1">chat</option>
        <option value="2">email</option>
      </select>

      <select id = "Account_select" name="account_select" onchange="updateCharts();crtbtnAccount()">
        <option value="0">All</option>
        <option value="1">Sony</option>
        <option value="2">Capital One</option>
        <option value="3">Intel</option>
      </select>

      <select id = "LOB_select" name="LOB" onchange="updateCharts();crtbtnLOB()">
        <option value="0">All</option>
        <option value="1">Sound</option>
        <option value="2">Video</option>
      </select>

      <select id = "Zone_select" name="Zone" onchange="updateCharts();crtbtnZone()">
        <option value="0">All</option>
        <option value="1">Blue</option>
        <option value="2">Green</option>
        <option value="3">Red</option>
        <option value="4">White</option>
      </select>
    </form>
  </div>
  <div id = "CreatedBtn"></div>
  <div class="chartContainer">			
    <div class="chart_single">        
      <canvas id="gender_chart" ></canvas>				
    </div>
    <div class="chart_single">        
      <canvas id="age_chart" ></canvas>				
    </div>
    <div class="chart_single">        
      <canvas id="tenure_chart" ></canvas>				
    </div>
    <div class="chart_single">        
      <canvas id="ccbg_chart" ></canvas>				
    </div>
    <div class="chart_single">        
      <canvas id="educ_chart" ></canvas>				
    </div>
    <div class="chart_single">        
      <canvas id="mset_chart"></canvas>				
    </div>
  </div>
  <script>			
    function addData(whatChart) {
      whatChart.data.datasets[0].data[2] = 8;
      whatChart.data.labels[2] = "Unknown";
      whatChart.update();
    }
    createCharts();
  </script>
</div>

0 个答案:

没有答案
相关问题
最新问题