如何删除表中每个td标记的第一个字符,然后用Google图表API和Javascript显示它

如何删除表中每个td标记的第一个字符,然后用Google图表API和Javascript显示它,javascript,jquery,charts,google-visualization,Javascript,Jquery,Charts,Google Visualization,我在表中的当前行是: 销售额|销售额| 1000 | 1170 | 660 | 980 | 1200 | 1000 但是,当我将此更改为: 销售额|销售额| 1000美元| 1170美元| 660美元| 980美元| 1200美元| 1000美元 根据上面的更改,图表不再适用于该行。因此,我想删除第一个字符$,以使该行将所有值返回到第一个blockquote -使用第一个区块报价 -使用第二个Blockquote HTML: <div id="chart_div" style="alig

我在表中的当前行是:

销售额|销售额| 1000 | 1170 | 660 | 980 | 1200 | 1000

但是,当我将此更改为:

销售额|销售额| 1000美元| 1170美元| 660美元| 980美元| 1200美元| 1000美元

根据上面的更改,图表不再适用于该行。因此,我想删除第一个字符
$
,以使该行将所有值返回到第一个blockquote

-使用第一个区块报价

-使用第二个Blockquote


HTML:

<div id="chart_div" style="align-content: center"></div>

<table border="1">
<tr>
    <td>Title1</td>
    <td>Title2</td>
    <td>Title3</td>
    <td>Title4</td>
    <td>Title5</td>
    <td>Title6</td>
    <td>Title7</td>
    <td>Title8</td>
</tr>
<tr>
    <td class="ms-vb-title">Year</td>
    <td class="ms-vb-title">Year</td>
    <td class="ms-vh2">2004</td>
    <td class="ms-vh2">2005</td>
    <td class="ms-vh2">2006</td>
    <td class="ms-vh2">2007</td>
    <td class="ms-vh2">2008</td>
    <td class="ms-vh2">2009</td>
</tr>
<tr>
    <td class="ms-vb-title">Sales</td>
    <td class="ms-vb-title">Sales</td>
    <td class="ms-vh2">$1000</td>
    <td class="ms-vh2">$1170</td>
    <td class="ms-vh2">$660</td>
    <td class="ms-vh2">$980</td>
    <td class="ms-vh2">$1200</td>
    <td class="ms-vh2">$1000</td>
</tr>
<tr>
    <td class="ms-vb-title">Expenses</td>
    <td class="ms-vb-title">Expenses</td>
    <td class="ms-vh2">400.5</td>
    <td class="ms-vh2">460</td>
    <td class="ms-vh2">1120</td>
    <td class="ms-vh2">1220</td>
    <td class="ms-vh2">1180</td>
    <td class="ms-vh2">740</td>
</tr>
</table>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Get data from ? column?
var from_column = 0;
// Get data to ? column?
var to_column = 6;


var FChartValue1 = new Array();
var FChartName = new Array();


$("document").ready(function () {

    var Coords1 = new Array();
    var Coords2 = new Array();
    var Labels = new Array();

    var vertical_axis = "2,3";
    vertical_axis = vertical_axis.split(',');
    for (var i = 0; i < vertical_axis.length; i++) {
        Coords1 = getCoords(vertical_axis[0]); // Display Vertical Axis in the row "2"
        Coords2 = getCoords(vertical_axis[1]); // Display Vertical Axis in the row "3"
    }

    function getCoords(vertical_axis) {
        var Coords = [];
        var arrayList1 = $("td.ms-vb-title:contains('')").eq(1).closest('table').find('tr');
        var arrayList1_temp;
        $(arrayList1).each(function () {
            if ($(this).find('td.ms-vb-title').eq(0).text() != "") {
                if (arrayList1_temp) {
                    arrayList1_temp = arrayList1_temp.add($(this).find('td.ms-vb-title').eq(1).closest('table').find('tr').eq(vertical_axis).find('td').not(".ms-vb-title").slice(from_column, to_column));
                }
                else {
                    arrayList1_temp = $(this).find('td.ms-vb-title').eq(1).closest('table').find('tr').eq(vertical_axis).find('td').not(".ms-vb-title").slice(from_column, to_column);
                }
            }
        });
        $.each(arrayList1_temp, function (i, e) {
            Coords[i] = $(e).text();
        });
        return Coords;
    }


    var temp = "Mon,Tue,Wed,Thu,Fri,Sat,Sun";
    temp = temp.split(",");
    $.each(temp, function (i) {
        Labels[i] = temp[i];
    });

    FChartValue1 = Coords1; // Display value in the column "1" to the Chart
    FChartValue2 = Coords2; // Display value in the column "2" to the Chart
    FChartName = Labels;
});


//Graph Rendering
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Number');
    data.addColumn('number', 'Sales'); // Annotate P2
    data.addColumn('number', 'Expenses'); // Annotate P3

    data.addRows(FChartValue1.length);

    for (i = 0; i < FChartValue1.length; i++) {
        data.setValue(i, 0, FChartName[i]);
        data.setValue(i, 1, parseFloat(FChartValue1[i]));
        data.setValue(i, 2, parseFloat(FChartValue2[i]));
        //data.setValue(i, 2, parseInt(FChartValue2[i])); // Second column Chart
    }

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {
        title: 'Report for Electric Energy Consumption', // Title for the Chart
        width: 1000, height: 400, is3D: false,
        hAxis: { title: 'Date', titleTextStyle: { color: 'black', fontName: 'Tahoma', italic: false } }, // Title for Horizontal Axis
        vAxis: { title: "kW", titleTextStyle: { color: 'black', fontName: 'Tahoma', italic: false } }, // Title for Vertical Axis
    }
    );
}
</script>

标题1
标题2
标题3
标题4
标题5
标题6
标题7
标题8
年
年
2004
2005
2006
2007
2008
2009
销售额
销售额
$1000
$1170
$660
$980
$1200
$1000
费用
费用
400.5
460
1120
1220
1180
740
Javascript:

<div id="chart_div" style="align-content: center"></div>

<table border="1">
<tr>
    <td>Title1</td>
    <td>Title2</td>
    <td>Title3</td>
    <td>Title4</td>
    <td>Title5</td>
    <td>Title6</td>
    <td>Title7</td>
    <td>Title8</td>
</tr>
<tr>
    <td class="ms-vb-title">Year</td>
    <td class="ms-vb-title">Year</td>
    <td class="ms-vh2">2004</td>
    <td class="ms-vh2">2005</td>
    <td class="ms-vh2">2006</td>
    <td class="ms-vh2">2007</td>
    <td class="ms-vh2">2008</td>
    <td class="ms-vh2">2009</td>
</tr>
<tr>
    <td class="ms-vb-title">Sales</td>
    <td class="ms-vb-title">Sales</td>
    <td class="ms-vh2">$1000</td>
    <td class="ms-vh2">$1170</td>
    <td class="ms-vh2">$660</td>
    <td class="ms-vh2">$980</td>
    <td class="ms-vh2">$1200</td>
    <td class="ms-vh2">$1000</td>
</tr>
<tr>
    <td class="ms-vb-title">Expenses</td>
    <td class="ms-vb-title">Expenses</td>
    <td class="ms-vh2">400.5</td>
    <td class="ms-vh2">460</td>
    <td class="ms-vh2">1120</td>
    <td class="ms-vh2">1220</td>
    <td class="ms-vh2">1180</td>
    <td class="ms-vh2">740</td>
</tr>
</table>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Get data from ? column?
var from_column = 0;
// Get data to ? column?
var to_column = 6;


var FChartValue1 = new Array();
var FChartName = new Array();


$("document").ready(function () {

    var Coords1 = new Array();
    var Coords2 = new Array();
    var Labels = new Array();

    var vertical_axis = "2,3";
    vertical_axis = vertical_axis.split(',');
    for (var i = 0; i < vertical_axis.length; i++) {
        Coords1 = getCoords(vertical_axis[0]); // Display Vertical Axis in the row "2"
        Coords2 = getCoords(vertical_axis[1]); // Display Vertical Axis in the row "3"
    }

    function getCoords(vertical_axis) {
        var Coords = [];
        var arrayList1 = $("td.ms-vb-title:contains('')").eq(1).closest('table').find('tr');
        var arrayList1_temp;
        $(arrayList1).each(function () {
            if ($(this).find('td.ms-vb-title').eq(0).text() != "") {
                if (arrayList1_temp) {
                    arrayList1_temp = arrayList1_temp.add($(this).find('td.ms-vb-title').eq(1).closest('table').find('tr').eq(vertical_axis).find('td').not(".ms-vb-title").slice(from_column, to_column));
                }
                else {
                    arrayList1_temp = $(this).find('td.ms-vb-title').eq(1).closest('table').find('tr').eq(vertical_axis).find('td').not(".ms-vb-title").slice(from_column, to_column);
                }
            }
        });
        $.each(arrayList1_temp, function (i, e) {
            Coords[i] = $(e).text();
        });
        return Coords;
    }


    var temp = "Mon,Tue,Wed,Thu,Fri,Sat,Sun";
    temp = temp.split(",");
    $.each(temp, function (i) {
        Labels[i] = temp[i];
    });

    FChartValue1 = Coords1; // Display value in the column "1" to the Chart
    FChartValue2 = Coords2; // Display value in the column "2" to the Chart
    FChartName = Labels;
});


//Graph Rendering
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Number');
    data.addColumn('number', 'Sales'); // Annotate P2
    data.addColumn('number', 'Expenses'); // Annotate P3

    data.addRows(FChartValue1.length);

    for (i = 0; i < FChartValue1.length; i++) {
        data.setValue(i, 0, FChartName[i]);
        data.setValue(i, 1, parseFloat(FChartValue1[i]));
        data.setValue(i, 2, parseFloat(FChartValue2[i]));
        //data.setValue(i, 2, parseInt(FChartValue2[i])); // Second column Chart
    }

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {
        title: 'Report for Electric Energy Consumption', // Title for the Chart
        width: 1000, height: 400, is3D: false,
        hAxis: { title: 'Date', titleTextStyle: { color: 'black', fontName: 'Tahoma', italic: false } }, // Title for Horizontal Axis
        vAxis: { title: "kW", titleTextStyle: { color: 'black', fontName: 'Tahoma', italic: false } }, // Title for Vertical Axis
    }
    );
}
</script>

//从何处获取数据?专栏?
来自_列的var=0;
//获取数据到?专栏?
var to_column=6;
var FChartValue1=新数组();
var FChartName=新数组();
$(“文档”).ready(函数(){
var Coords1=新数组();
var Coords2=新数组();
var Labels=新数组();
var垂直轴=“2,3”;
垂直轴=垂直轴。拆分(',');
对于(变量i=0;i
只需对值执行字符串替换即可

演示: