如何从谷歌柱形图api添加链接（可逐列点击并获取数据）

【问题标题】：How to add link (which is clickable column by column and fetch data) from google column chart api如何从谷歌柱形图api添加链接（可逐列点击并获取数据）
【发布时间】：2020-11-02 09:36:46
【问题描述】：

最近我使用 Google Chart API 从我从 mySQL 中检索到的数据中绘制了一个柱形图。

我想在谷歌图表中为它的每个柱形图添加外部链接，以获取 datediff(current_timestamp,inserted_time from database) 在提供的图像多少天之间的老化天数。

老化仪表板 Google 柱形图 API

以及提供的第二张图片 单击其中一个柱形图后显示的柱形图表格

老化.js

 layui.use(['form', 'element', 'laydate', 'jquery', 'layer', 'table'], function() {
var $ = layui.$,
    layerTips = parent.layer === undefined ? layui.layer : parent.layer,
    form = layui.form,
    table = layui.table,
    laydate = layui.laydate;


$('.chart').hide();                                                          
form.on('submit(search)', function() {
    form.scheme = $('#scheme').val();
    form.counter = $('#counter').val();
    form.status = $('#status').val();
    form.merchant = $('#merchant').val();
    $.ajax({
        type: 'post',
        url: '../../graph-data',
        dateType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(form),
        error: function() {
            console.log("error");
        },
        success: function(res) {
            
            // Google chart
            var result = [];
            if ($('#counter').val() == "cases") {
                result.push(["Days", "Cases", { role: "style" }]);

            } else {
                result.push(["Days", "Amount", { role: "style" }]);
            }
            if (res['aging2ChartResult'].length != 0) {
                for (var i = 0; i < res['aging2ChartResult'].length; i++) {


                    if ($('#counter').val() == "amount") {
                        var item = ["Less than 10 day", res['aging2ChartResult'][i]['amount1'], "lightgreen "]
                        var item1 = ["Between 10 ~ 19 Days", res['aging2ChartResult'][i]['amount2'], "lightgreen"]
                        var item2 = ["Between 20 ~ 29 Days", res['aging2ChartResult'][i]['amount3'], "lightgreen"]
                        var item3 = ["Between 30 ~ 39 Days", res['aging2ChartResult'][i]['amount4'], "lightgreen"]
                        var item4 = ["Between 40 ~ 49 Days", res['aging2ChartResult'][i]['amount5'], "lightgreen"]
                        var item5 = ["Between 50 ~ 59 Days", res['aging2ChartResult'][i]['amount6'], "lightgreen"]
                        var item6 = ["Between 60 ~ 69 Days", res['aging2ChartResult'][i]['amount7'], "lightgreen"]
                        var item7 = ["Between 70 ~ 79 Days", res['aging2ChartResult'][i]['amount8'], "lightgreen"]
                        var item8 = ["Between 80 ~ 89 Days", res['aging2ChartResult'][i]['amount9'], "lightgreen"]
                        var item9 = ["At 90 Days", res['aging2ChartResult'][i]['amount10'], "lightgreen"]
                        var item10 = ["More than 90 Days", res['aging2ChartResult'][i]['amount11'], "lightgreen"]
                            // console.log(res);
                    } else {
                        var item = ["Less than 10 Days", res['aging2ChartResult'][i]['less10d'], "lightgreen"]
                        var item1 = ["Between 10 ~ 19 Days", res['aging2ChartResult'][i]['between10d'], "lightgreen"]
                        var item2 = ["Between 20 ~ 29 Days", res['aging2ChartResult'][i]['between20d'], "lightgreen"]
                        var item3 = ["Between 30 ~ 39 Days", res['aging2ChartResult'][i]['between30d'], "lightgreen"]
                        var item4 = ["Between 40 ~ 49 Days", res['aging2ChartResult'][i]['between40d'], "lightgreen"]
                        var item5 = ["Between 50 ~ 59 Days", res['aging2ChartResult'][i]['between50d'], "lightgreen"]
                        var item6 = ["Between 60 ~ 69 Days", res['aging2ChartResult'][i]['between60d'], "lightgreen"]
                        var item7 = ["Between 70 ~ 79 Days", res['aging2ChartResult'][i]['between70d'], "lightgreen"]
                        var item8 = ["Between 80 ~ 89 Days", res['aging2ChartResult'][i]['between80d'], "lightgreen"]
                        var item9 = ["At 90 Days", res['aging2ChartResult'][i]['equal90d'], "lightgreen"]
                        var item10 = ["More than 90 Days", res['aging2ChartResult'][i]['moret90d'], "lightgreen"]

                    }

                    result.push(item, item1, item2, item3, item4, item5, item6, item7, item8, item9, item10);
                }
                google.charts.load("current", {
                    packages: ['corechart']
                });
                google.charts.setOnLoadCallback(drawChart);

                function drawChart() {
                    var data = google.visualization.arrayToDataTable(result);
                    var view = new google.visualization.DataView(data);
                    view.setColumns([0, 1, {
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation"
                        },
                        2
                    ]);

                    var options = {
                        title: $('#counter').val() == "amount" ? "Amount(RM)" : "Cases",
                        vAxis: {
                            title: form.unit == "amount" ? "Amount(RM)" : "Cases",
                        },
                        hAxis: {
                            title: 'Aging Days'
                        },
                        width: 1100,
                        height: 400,
                        bar: {
                            groupWidth: "75%"
                        },
                        legend: {
                            position: "none"
                        },
                    };
                    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));          
chart.draw(view, options);

}
                $('.chart').show();
            } else {
                $('.chart').hide();
            }
        },
    });
});
});

下面是我的aging.html文件

<head>
<title>Aging</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div class="layui-container chart">
<div id="columnchart_values" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>

和我的 SQL(Mapper.xml)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//ibatis.apache.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="xx.xx.xx.dao.ReportMapper">
 <resultMap id="AgingMerchantInfo" type="xx.xx.xx.model.dto.AgingMerchantInfo">
    <result column="branch_name" jdbcType="VARCHAR" property="branchName" />
    <result column="agent_code" jdbcType="VARCHAR" property="agentCode" />

</resultMap>

<resultMap id="Aging2ResultMap" type="xx.xx.xx.model.dto.Aging2ChartResultInfo">
    <result column="amount1" jdbcType="DECIMAL" property="amount1" />
    <result column="amount2" jdbcType="DECIMAL" property="amount2" />
    <result column="amount3" jdbcType="DECIMAL" property="amount3" />
    <result column="amount4" jdbcType="DECIMAL" property="amount4" />
    <result column="amount5" jdbcType="DECIMAL" property="amount5" />
    <result column="amount6" jdbcType="DECIMAL" property="amount6" />
    <result column="amount7" jdbcType="DECIMAL" property="amount7" />
    <result column="amount8" jdbcType="DECIMAL" property="amount8" />
    <result column="amount9" jdbcType="DECIMAL" property="amount9" />
    <result column="amount10" jdbcType="DECIMAL" property="amount10" />
    <result column="amount11" jdbcType="DECIMAL" property="amount11" />
    <result column="less10d" jdbcType="DECIMAL" property="less10d" />
    <result column="between10d" jdbcType="DECIMAL" property="between10d" />
    <result column="between20d" jdbcType="DECIMAL" property="between20d" />
    <result column="between30d" jdbcType="DECIMAL" property="between30d" />
    <result column="between40d" jdbcType="DECIMAL" property="between40d" />
    <result column="between50d" jdbcType="DECIMAL" property="between50d" />
    <result column="between60d" jdbcType="DECIMAL" property="between60d" />
    <result column="between70d" jdbcType="DECIMAL" property="between70d" />
    <result column="between80d" jdbcType="DECIMAL" property="between80d" />
    <result column="equal90d" jdbcType="DECIMAL" property="equal90d" />
    <result column="moret90d" jdbcType="DECIMAL" property="moret90d" />
</resultMap>

<resultMap id="AgingTableResultMap" type="xx.xx.xx.model.dto.AgingTableInfo">
    <result column="update_time" jdbcType="TIMESTAMP" property="updateTime" />
    <result column="agent_code" jdbcType="VARCHAR" property="agentCode" />
    <result column="apply_name" jdbcType="VARCHAR" property="name" />
    <result column="apply_id_card" jdbcType="VARCHAR" property="ic" />
    <result column="finance_amount" jdbcType="VARCHAR" property="financeAmount" />
    <result column="brand" jdbcType="VARCHAR" property="brand" />
    <result column="model" jdbcType="VARCHAR" property="model" />
    <result column="status" jdbcType="VARCHAR" property="status" />
    <result column="aging" jdbcType="VARCHAR" property="agingDays" />
</resultMap>



<select id="agingMerchantList" resultMap="AgingMerchantInfo">
    SELECT agent_code,branch_name FROM db_smilx.smilx_merchant_branch order by agent_code
</select>

<select id="getAging2ChartResult" resultMap="Aging2ResultMap">
    SELECT 
    <if test="counter == 'amount'">
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 0 AND 9 THEN o.finance_amount ELSE 0 END) as amount1,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 10 AND 19 THEN o.finance_amount ELSE 0 END) as amount2,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 20 AND 29 THEN o.finance_amount ELSE 0 END) as amount3,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 30 AND 39 THEN o.finance_amount ELSE 0 END) as amount4,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 40 AND 49 THEN o.finance_amount ELSE 0 END) as amount5,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 50 AND 59 THEN o.finance_amount ELSE 0 END) as amount6,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 60 AND 69 THEN o.finance_amount ELSE 0 END) as amount7,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 70 AND 79 THEN o.finance_amount ELSE 0 END) as amount8,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 80 AND 89 THEN o.finance_amount ELSE 0 END) as amount9,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) = 90 THEN o.finance_amount ELSE 0 END) as amount10,
        SUM(CASE WHEN DATEDIFF(CURRENT_TIMESTAMP,o.update_time) > 90 THEN o.finance_amount ELSE 0 END) as amount11
    </if>
    <if test="counter == 'cases'">
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 0 AND 9 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 0 AND 9 else 0 end) as less10d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 10 AND 19 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 10 AND 19 else 0 end) as between10d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 20 AND 29 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 20 AND 29 else 0 end) as between20d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 30 AND 39 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 30 AND 39 else 0 end) as between30d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 40 AND 49 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 40 AND 49 else 0 end) as between40d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 50 AND 59 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 50 AND 59 else 0 end) as between50d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 60 AND 69 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 60 AND 69 else 0 end) as between60d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 70 AND 79 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 70 AND 79 else 0 end) as between70d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 80 AND 89 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) BETWEEN 80 AND 89 else 0 end) as between80d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) = 90 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) = 90 else 0 end) as equal90d,
        sum(case when DATEDIFF(CURRENT_TIMESTAMP,o.update_time) > 90 then DATEDIFF(CURRENT_TIMESTAMP,o.update_time) >= 91 else 0 end) as moret90d
    </if>
    FROM product_info i right join smilx_brand_model m on i.prod_code = m.code 
    right join smilx_order o on m.brand = o.brand and m.model = o.model
    join db_smilx.smilx_merchant_branch mb on o.shop_no = mb.agent_code
    where 1=1
    <if test="status == 'all'">
    and (o.status="TO_SIGN" or o.status = "READY FIS UPLOAD" or o.status = "FIS PROCESS FAILED" or o.status = "VEHICLE REGN INPUT" or o.status = "SUBMIT FOR SALES CLAIM" )
    </if>
    <if test="status != 'all'">
        and o.status = #{status, jdbcType = VARCHAR} 
    </if>
    <if test="merchant != 'all'">
        and mb.agent_code = #{merchant,jdbcType = VARCHAR}
    </if>
    <if test="scheme != 'all'">
         and i.prod_name = #{scheme, jdbcType = VARCHAR} 
    </if>
</select>

<select id="agingresult" resultType="double" >
    SELECT 
    <if test="counter == 'amount'">
        sum(o.finance_amount) as finance_amount, 
    </if>
    <if test="counter == 'cases'">
        count(o.status) as count,
    </if>
    DATE(o.update_time) as update_time
    FROM product_info i right join smilx_brand_model m on i.prod_code = m.code 
    right join smilx_order o on m.brand = o.brand and m.model = o.model
    join db_smilx.smilx_merchant_branch mb on o.shop_no = mb.agent_code
    where 1=1
    <if test="status == 'all'">
        and (o.status="TO_SIGN" or o.status = "READY FIS UPLOAD" or o.status = "FIS PROCESS FAILED" or o.status = "VEHICLE REGN INPUT" or o.status = "SUBMIT FOR SALES CLAIM" )
    </if>
    <if test="status != 'all'">
            and o.status = #{status, jdbcType = VARCHAR} 
    </if>
    <if test="scheme != 'all'">
            and i.prod_name = #{scheme, jdbcType = VARCHAR} 
    </if>
    <if test="type == 'total'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 0 AND 150 
    </if>
    <if test="type == 'less10d'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 0 AND 9   
    </if>
    <if test="type == 'between10d'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 10 AND 19 
    </if>
    <if test="type == 'between20d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 20 AND 29 
    </if>
    <if test="type == 'between30d'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 30 AND 39 
    </if>
    <if test="type == 'between40d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 40 AND 49 
    </if>
    <if test="type == 'between50d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 50 AND 59 
    </if>
    <if test="type == 'between60d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 60 AND 69 
    </if>
    <if test="type == 'between70d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 70 AND 79 
    </if>
    <if test="type == 'between80d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 80 AND 89  
    </if>
    <if test="type == 'equal90d'">
        and  (DATEDIFF( CURRENT_TIMESTAMP , o.update_time) = 90 )
    </if>
    <if test="type == 'moret90d'">
        and  (DATEDIFF( CURRENT_TIMESTAMP , o.update_time) >= 91 ) 
    </if>
    <if test="merchant != 'all'">
        and mb.agent_code = #{merchant,jdbcType = VARCHAR}
    </if>
</select>

<select id="agingTable" resultMap="AgingTableResultMap">
    SELECT
        o.update_time,o.shop_no,o.shop_name,o.apply_name,o.apply_id_card,o.status,o.finance_amount,o.brand,o.model,o.status
        ,datediff(current_timestamp,o.update_time) as aging 
    FROM db_smilx.product_info i right join db_smilx.smilx_brand_model m on i.prod_code = m.code 
    right join db_smilx.smilx_order o on m.brand = o.brand and m.model = o.model
    join db_smilx.smilx_merchant_branch mb on o.shop_no = mb.agent_code and o.shop_name = mb.branch_name
    where 1=1
    <if test="status == 'all'">
        and (o.status="TO_SIGN" or o.status = "READY FIS UPLOAD" or o.status = "FIS PROCESS FAILED" or o.status = "VEHICLE REGN INPUT" or o.status = "SUBMIT FOR SALES CLAIM" )
    </if>
    <if test="status != 'all'">
            and o.status = #{status, jdbcType = VARCHAR} 
    </if>
    <if test="merchant != 'all'">
        and mb.agent_code = #{merchant,jdbcType = VARCHAR}
    </if>
    <if test="scheme != 'all'">
        and i.prod_name = #{scheme, jdbcType = VARCHAR} 
    </if>
    <if test="aging == 'all'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 0 AND 100
    </if>
    <if test="aging == 'l10d'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 0 AND 9   
    </if>
    <if test="aging == 'b10d'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 10 AND 19 
    </if>
    <if test="aging == 'b20d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 20 AND 29 
    </if>
    <if test="aging == 'b30d'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 30 AND 39 
    </if>
    <if test="aging == 'b40d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 40 AND 49 
    </if>
    <if test="aging == 'b50d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 50 AND 59 
    </if>
    <if test="aging == 'b60d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 60 AND 69 
    </if>
    <if test="aging == 'b70d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 70 AND 79 
    </if>
    <if test="aging == 'b80d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 80 AND 89  
    </if>
    <if test="aging == 'e90d'">
        and  (DATEDIFF( CURRENT_TIMESTAMP , o.update_time) = 90 )
    </if>
    <if test="aging == 'm90d'">
        and  (DATEDIFF( CURRENT_TIMESTAMP , o.update_time) >= 91 ) 
    </if>
</select>    

<select id="agingcountresult" resultType="Int">
    SELECT 

    count(*)

    FROM db_smilx.product_info i right join db_smilx.smilx_brand_model m on i.prod_code = m.code 
    right join db_smilx.smilx_order o on m.brand = o.brand and m.model = o.model
    join db_smilx.smilx_merchant_branch mb on o.shop_no = mb.agent_code and o.shop_name = mb.branch_name
    where 1=1
    <if test="status == 'all'">
        and (o.status="TO_SIGN" or o.status = "READY FIS UPLOAD" or o.status = "FIS PROCESS FAILED" or o.status = "VEHICLE REGN INPUT" or o.status = "SUBMIT FOR SALES CLAIM" )
    </if>
    <if test="status != 'all'">
            and o.status = #{status, jdbcType = VARCHAR} 
    </if>
    <if test="merchant != 'all'">
        and mb.agent_code = #{merchant,jdbcType = VARCHAR}
    </if>
    <if test="scheme != 'all'">
        and i.prod_name = #{scheme, jdbcType = VARCHAR} 
    </if>
    <if test="type == 'total'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 0 AND 100
    </if>
    <if test="type == 'l10d'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 0 AND 9   
    </if>
    <if test="type == 'b10d'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 10 AND 19 
    </if>
    <if test="type == 'b20d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 20 AND 29 
    </if>
    <if test="type == 'b30d'">
        and DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 30 AND 39 
    </if>
    <if test="type == 'b40d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 40 AND 49 
    </if>
    <if test="type == 'b50d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 50 AND 59 
    </if>
    <if test="type == 'b60d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 60 AND 69 
    </if>
    <if test="type == 'b70d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 70 AND 79 
    </if>
    <if test="type == 'b80d'">
        and  DATEDIFF( CURRENT_TIMESTAMP , o.update_time) BETWEEN 80 AND 89  
    </if>
    <if test="type == 'e90d'">
        and  (DATEDIFF( CURRENT_TIMESTAMP , o.update_time) = 90 )
    </if>
    <if test="type == 'm90d'">
        and  (DATEDIFF( CURRENT_TIMESTAMP , o.update_time) >= 91 ) 
    </if>
</select>

#抱歉有任何混淆语言#

【问题讨论】：

    标签： javascript html charts google-visualization


    【解决方案1】：

    由于没有答案，我已经找到了调用URL的方法，我想在这里分享一下。

    在Javascript中调用jquery从数据库（mysql/mybatis）返回数据。

    $.ajax({
        type: 'post',
        url: '/dashboard/lddc-aging-data',
        dateType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(form),
        error: function() {
            console.log("error");
        },
        success: function(res) {
            console.log(res);
            if ($('#counter').val() == "cases") {
                $("#lesS10d").val(res['lesS10d']  + " case(s)");
                $("#betweeN10d").val(res['betweeN10d'] + " case(s)");
                $("#betweeN20d").val(res['betweeN20d'] + " case(s)");
                $("#betweeN30d").val(res['betweeN30d'] + " case(s)");
                $("#betweeN40d").val(res['betweeN40d'] + " case(s)");
                $("#betweeN50d").val(res['betweeN50d'] + " case(s)");
                $("#betweeN60d").val(res['betweeN60d'] + " case(s)");
                $("#betweeN70d").val(res['betweeN70d'] + " case(s)");
                $("#betweeN80d").val(res['betweeN80d'] + " case(s)");
                $("#equaL90d").val(res['equaL90d'] + " case(s)");
                $("#moreT90d").val(res['moreT90d'] + " case(s)");
                $("#total").val(res['total'] + " case(s)");
                $('.result').css("display","block");
            } else {
                $("#lesS10d").val("RM " + res['lesS10d']);
                $("#betweeN10d").val("RM " + res['betweeN10d']);
                $("#betweeN20d").val("RM " + res['betweeN20d']);
                $("#betweeN30d").val("RM " + res['betweeN30d']);
                $("#betweeN40d").val("RM " + res['betweeN40d']);
                $("#betweeN50d").val("RM " + res['betweeN50d']);
                $("#betweeN60d").val("RM " + res['betweeN60d']);
                $("#betweeN70d").val("RM " + res['betweeN70d']);
                $("#betweeN80d").val("RM " + res['betweeN80d']);
                $("#equaL90d").val("RM " + res['equaL90d']);
                $("#moreT90d").val("RM " + res['moreT90d']);
                $("#total").val("RM " + res['total']);
                $('.result').css("display","block");
            }

            // Google chart
            var result = [];
            if ($('#counter').val() == "cases") {
                result.push(["Days", "Cases","link", { role: "style" }]);

            } else {
                result.push(["Days", "Amount","link", { role: "style" }]);
            }
            if (res['aging2ChartResult'].length != 0) {
                for (var i = 0; i < res['aging2ChartResult'].length; i++) {

                    if ($('#counter').val() == "amount") {
                        var item = ["Less than 10 day", res['aging2ChartResult'][i]['amount1'], "../../dashboard/lddc-agingtable-l10" , "lightgreen "]
                        var item1 = ["Between 10 ~ 19 Days", res['aging2ChartResult'][i]['amount2'], "../../dashboard/lddc-agingtable-b10" , "lightgreen"]
                        var item2 = ["Between 20 ~ 29 Days", res['aging2ChartResult'][i]['amount3'], "../../dashboard/lddc-agingtable-b20" , "lightgreen"]
                        var item3 = ["Between 30 ~ 39 Days", res['aging2ChartResult'][i]['amount4'], "../../dashboard/lddc-agingtable-b30" , "lightgreen"]
                        var item4 = ["Between 40 ~ 49 Days", res['aging2ChartResult'][i]['amount5'], "../../dashboard/lddc-agingtable-b40" , "lightgreen"]
                        var item5 = ["Between 50 ~ 59 Days", res['aging2ChartResult'][i]['amount6'], "../../dashboard/lddc-agingtable-b50" , "lightgreen"]
                        var item6 = ["Between 60 ~ 69 Days", res['aging2ChartResult'][i]['amount7'], "../../dashboard/lddc-agingtable-b60" , "lightgreen"]
                        var item7 = ["Between 70 ~ 79 Days", res['aging2ChartResult'][i]['amount8'], "../../dashboard/lddc-agingtable-b70" , "lightgreen"]
                        var item8 = ["Between 80 ~ 89 Days", res['aging2ChartResult'][i]['amount9'], "../../dashboard/lddc-agingtable-b80" , "lightgreen"]
                        var item9 = ["At 90 Days", res['aging2ChartResult'][i]['amount10'], "../../dashboard/lddc-agingtable-e90" , "lightgreen"]
                        var item10 = ["More than 90 Days", res['aging2ChartResult'][i]['amount11'], "../../dashboard/lddc-agingtable-m90" , "lightgreen"]
                            // console.log(res);
                    } else {
                        var item = ["Less than 10 Days", res['aging2ChartResult'][i]['less10d'], "../../dashboard/lddc-agingtable-l10" , "lightgreen"]
                        var item1 = ["Between 10 ~ 19 Days", res['aging2ChartResult'][i]['between10d'], "../../dashboard/lddc-agingtable-b10" , "lightgreen"]
                        var item2 = ["Between 20 ~ 29 Days", res['aging2ChartResult'][i]['between20d'], "../../dashboard/lddc-agingtable-b20" , "lightgreen"]
                        var item3 = ["Between 30 ~ 39 Days", res['aging2ChartResult'][i]['between30d'], "../../dashboard/lddc-agingtable-b30" , "lightgreen"]
                        var item4 = ["Between 40 ~ 49 Days", res['aging2ChartResult'][i]['between40d'], "../../dashboard/lddc-agingtable-b40" , "lightgreen"]
                        var item5 = ["Between 50 ~ 59 Days", res['aging2ChartResult'][i]['between50d'], "../../dashboard/lddc-agingtable-b50" , "lightgreen"]
                        var item6 = ["Between 60 ~ 69 Days", res['aging2ChartResult'][i]['between60d'], "../../dashboard/lddc-agingtable-b60" , "lightgreen"]
                        var item7 = ["Between 70 ~ 79 Days", res['aging2ChartResult'][i]['between70d'], "../../dashboard/lddc-agingtable-b70" , "lightgreen"]
                        var item8 = ["Between 80 ~ 89 Days", res['aging2ChartResult'][i]['between80d'], "../../dashboard/lddc-agingtable-b80" , "lightgreen"]
                        var item9 = ["At 90 Days", res['aging2ChartResult'][i]['equal90d'], "../../dashboard/lddc-agingtable-e90" , "lightgreen"]
                        var item10 = ["More than 90 Days", res['aging2ChartResult'][i]['moret90d'], "../../dashboard/lddc-agingtable-m90" , "lightgreen"]

                    }

                    result.push(item, item1, item2, item3, item4, item5, item6, item7, item8, item9, item10);
                }
                google.charts.load("current", {
                    packages: ['corechart']
                });
                google.charts.setOnLoadCallback(drawChart);

                function drawChart() {
                    var data = google.visualization.arrayToDataTable(result);
                    var view = new google.visualization.DataView(data);
                    view.setColumns([0, 1, {
                            calc: "stringify",
                            sourceColumn: 1,
                            type: "string",
                            role: "annotation"
                        },
                        3
                    ]);

                    var options = {
                        title: $('#counter').val() == "amount" ? "Amount(RM)" : "Cases",
                        vAxis: {
                            title: form.unit == "amount" ? "Amount(RM)" : "Cases",
                        },
                        hAxis: {
                            title: 'Aging Days'
                        },
                        width: 1100,
                        height: 400,
                        bar: {
                            groupWidth: "75%"
                        },
                        legend: {
                            position: "none"
                        },
                    };
                    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
                    chart.draw(view, options);

                    // trying
                    google.visualization.events.addListener(chart, 'select', selectHandler);
                    function selectHandler(e) {
                          var selection = chart.getSelection();
                          if (selection.length == true && selection[0].row != null) {
                            console.log(selection[0]);
                            console.log(data.getValue(chart.getSelection()[0]['row'], 2 ));
                            window.location = data.getValue(chart.getSelection()[0]['row'], 2 );
                               
                                
                           } 
                        }

                    //trying

                }
                $('.chart').show();
            } else {
                $('.chart').hide();
            }
            
        },
    });

    您需要在控制器中添加URL，用于调用该url并显示在表格中。不要忘记为 DAO,DTO,SERVICE 和 Mapper 添加新的接口来获取数据。最后但并非最不重要的一点是，当您单击如上所示的条形图时，为链接调用创建新的 html。

    【讨论】：

      猜你喜欢
      • 2014-03-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-04-28
      • 1970-01-01
      • 2018-04-10
      相关资源
      最近更新 更多
      热门标签
      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