我希望我的代码能够根据下拉选项更改图表，同时我还要从HTML表格中获取数据。 我的所有代码都运行正常，但我想将它与Switch Case或任何其他代码相关联，如果你可以建议的话。这就是我到现在为止所尝试的代码。
var counter = 0;
$("[prasora-chart-type]").each(function()
{
counter++;
var tableObject = $(this);
tableObject.after('<div style="width:400px; height:200px;"><canvas id="prasora_new_chart'+ counter +'" style="width:100%; height:100%;"></canvas></div>');
var ctx = $("#prasora_new_chart"+ counter);
//var ctx = document.getElementById("#prasora_new_chart"+ counter);
var chartType = tableObject.attr('prasora-chart-type');
switch(chartType)
{
case 'line':
{
//CreateLineChart(ctx, tableObject);
}
break;
case 'bar':
{
//CreateBarChart(ctx, tableObject);
}
break;
case 'pie':
{
CreatePieChart(ctx, tableObject);
}
break;
default:
{}
}
tableObject.hide();
});
function CreateLineChart(ctx, tableObject)
{
var header = Array();
tableObject.closest('table').find('th').each(function(i, v){
header[i] = $(this).text();
})
//var idColumnIndex = header.indexOf('ID');
var xColumnIndex = header.indexOf('XValue')+1;
var yColumnIndex = header.indexOf('YValue')+1;
var labelColumnIndex = header.indexOf('Label')+1;
var toolTipColumnIndex = header.indexOf('Tooltip')+1;
var xValues = [];
var yValues = [];
var labelValues = [];
var toolTipValues = [];
tableObject.closest('table').find('tr:not(:first)').each(function()
{
if(xColumnIndex> 0)
xValues.push($(this).find("td:nth-child("+(xColumnIndex)+")").text());
if(yColumnIndex> 0)
yValues.push($(this).find("td:nth-child("+(yColumnIndex)+")").text());
if(labelColumnIndex> 0)
labelValues.push($(this).find("td:nth-child("+(labelColumnIndex)+")").text());
if(toolTipColumnIndex> 0)
toolTipValues.push($(this).find("td:nth-child("+(toolTipColumnIndex)+")").text());
});
var dataValues = [];
for (var i = 0; i < xValues.length; i++) {
//dataValues[i].x = xValues[i];
//dataValues[i].y = yValues[i];
dataValues[i] = {x:xValues[i], y:yValues[i]};
}
//Working fine till here.
var data = {
//labels: xValues,
datasets: [
{
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: dataValues,
spanGaps: false,
}
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend: {
display: false
},
scales: {
xAxes: [{
//type: 'linear',
position: 'bottom'
}]
}
}
});
}
function CreateBarChart(ctx, tableObject)
{
var c = ctx[0].getContext("2d");
c.font="30px Arial";
c.fillText("Bar Chart",10,50);
}
function CreatePieChart(ctx, tableObject)
{
var header = Array();
tableObject.closest('table').find('th').each(function(i, v){
header[i] = $(this).text();
})
var valueColumnIndex = header.indexOf('Value')+1;
var labelColumnIndex = header.indexOf('Label')+1;
var toolTipColumnIndex = header.indexOf('Tooltip')+1;
var values = [];
var labelValues = [];
var toolTipValues = [];
tableObject.closest('table').find('tr:not(:first)').each(function(){
if(valueColumnIndex> 0)
values.push($(this).find("td:nth-child("+(valueColumnIndex)+")").text());
if(labelColumnIndex> 0)
labelValues.push($(this).find("td:nth-child("+(labelColumnIndex)+")").text());
if(toolTipColumnIndex> 0)
toolTipValues.push($(this).find("td:nth-child("+(toolTipColumnIndex)+")").text());
});
var data = {
labels: labelValues,
datasets:
[
{
data: values,
backgroundColor: (values=>Please.make_color({format:"hex"})),
hoverBackgroundColor: (values=>Please.make_color({format:"hex"}))
}]
};
var myLineChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
legend: {
display: true
}
}
});
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head
</head>
<body>
<div class="tables">
<table prasora-chart-type="bar" prasora-chart-title="State Wise Values" prasora-chart-xlabel="Performance" prasora-chart-ylabel="States"
prasora-chart-showlegend="0" prasora-chart-varycolor="1">
<tr>
<th>ID</th>
<th>Value</th>
<th>Label</th>
<th>Tooltip</th>
</tr>
<tr>
<td>1</td>
<td>20</td>
<td>Maharashtra</td>
<td>Maharashtra:20</td>
</tr>
<tr>
<td>2</td>
<td>40</td>
<td>UP</td>
<td>UP:40</td>
</tr>
<tr>
<td>3</td>
<td>30</td>
<td>Bihar</td>
<td>Bihar:30</td>
</tr>
<tr>
<td>4</td>
<td>15</td>
<td>Rajasthan</td>
<td>Rajasthan:15</td>
</tr>
</table>
<table prasora-chart-type="line" prasora-chart-title="State Wise Values" prasora-chart-xlabel="Performance" prasora-chart-ylabel="Indicator"
prasora-chart-showlegend="0" prasora-chart-varycolor="1" prasora-chart-fillbelow="0" >
<tr>
<th>ID</th>
<th>YValue</th>
<th>Label</th>
<th>Tooltip</th>
<th>XValue</th>
</tr>
<tr>
<td>1</td>
<td>20</td>
<td>Maharashtra</td>
<td>Maharashtra:20</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>40</td>
<td>UP</td>
<td>UP:40</td>
<td>15</td>
</tr>
<tr>
<td>3</td>
<td>30</td>
<td>Bihar</td>
<td>Bihar:30</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>15</td>
<td>Rajasthan</td>
<td>Rajasthan:15</td>
<td>40</td>
</tr>
</table>
<table prasora-chart-type="pie" prasora-chart-title="State Wise Values" prasora-chart-showlegend="0" prasora-chart-varycolor="1" prasora-chart-showpercentage="1">
<tr>
<th>ID</th>
<th>Value</th>
<th>Label</th>
<th>Tooltip</th>
</tr>
<tr>
<td>1</td>
<td>20</td>
<td>Maharashtra</td>
<td>Maharashtra:20</td>
</tr>
<tr>
<td>2</td>
<td>40</td>
<td>UP</td>
<td>UP:40</td>
</tr>
<tr>
<td>3</td>
<td>30</td>
<td>Bihar</td>
<td>Bihar:30</td>
</tr>
<tr>
<td>4</td>
<td>15</td>
<td>Rajasthan</td>
<td>Rajasthan:15</td>
</tr>
</table>
<select id="mySelect" onchange="showhide(this)">
<option value="">Chart Type:</option>
<!-- the option values are suffixes for the elements to show -->
<option value="0">line</option>
<option value="1">bar</option>
<option value="2">pie</option>
</select>
</div>
<script src="Chart.bundle.min.js"></script>
<script src="jquery.min.js"></script>
<script src="Please-compressed.js"></script>
</body>
</html>
============================================== < / p>