如何从 google 柱形图 api 添加 link（可逐列点击并获取数据）
How to add link (which is clickable column by column and fetch data) from google column chart api
最近我使用 Google 图表 API 从 mySQL.
检索到的数据绘制柱形图
我想在 google 图表中为它的每个柱形图添加外部 link 以从数据库中获取 datediff(current_timestamp,inserted_time 的老化天数)图片提供的天数之间。
老化仪表板 Google 柱形图 API
以及提供的第二张图片
单击其中一个柱状图后显示的柱状图table
Aging.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>
#抱歉任何混淆语言#
由于没有答案，我找到了调用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();
}
},
});
需要在controller中添加URL调用url，显示在table中。不要忘记为 DAO,DTO,SERVICE 和 Mapper 添加新接口以获取数据。最后但同样重要的是，当您单击上面显示的条形图时，为 link 调用创建新的 html。
最近我使用 Google 图表 API 从 mySQL.
检索到的数据绘制柱形图我想在 google 图表中为它的每个柱形图添加外部 link 以从数据库中获取 datediff(current_timestamp,inserted_time 的老化天数)图片提供的天数之间。
以及提供的第二张图片
Aging.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>
#抱歉任何混淆语言#
由于没有答案，我找到了调用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();
}
},
});
需要在controller中添加URL调用url，显示在table中。不要忘记为 DAO,DTO,SERVICE 和 Mapper 添加新接口以获取数据。最后但同样重要的是，当您单击上面显示的条形图时，为 link 调用创建新的 html。