小编Web*_*rer的帖子

Chart.js:条形图单击事件

我刚刚开始使用Chart.js,我很快就感到非常沮丧.我的堆积条形图有效,但我无法点击"事件".

我已经nnnick Chart.js中找到了对GitHub评论,说明要使用该函数getBarsAtEvent,即使在Chart.js文档中根本找不到这个函数(继续,搜索它).文档确实提到了引用的getElementsAtEvent功能chart,但仅适用于折线图.

我在canvas元素上设置了一个事件监听器(正确的方式):

canv.addEventListener('click', handleClick, false);
Run Code Online (Sandbox Code Playgroud)

......但在我的handleClick功能中,尚未chart.getBarsAtEvent定义!

现在,在Chart.js文档中,有一个关于为条形图注册click事件的不同方法的声明.这nnnick与2年前对GitHub的评论截然不同.

全局图表默认值中,您可以onClick为图表设置功能.我onClick在图表配置中添加了一个函数,它没有做任何事......

那么,我如何获得点击回调以适用于我的条形图?!

任何帮助将不胜感激.谢谢!

PS:我没有使用GitHub的主版本.我试过,但它一直在尖叫,require is undefined我还没准备好包括CommonJS,以便我可以使用这个图表库.我宁愿写自己的dang图表.相反,我下载并使用我直接从文档页面顶部的链接下载的标准版本版本.

示例:以下是我正在使用的配置示例:

var chart_config = {
    type: 'bar',
    data: {
        labels: ['One', 'Two', 'Three'],
        datasets: [
            {
                label: 'Dataset 1',
                backgroundColor: '#848484',
                data: [4, 2, 6]
            },
            {
                label: 'Dataset 2',
                backgroundColor: …
Run Code Online (Sandbox Code Playgroud)

javascript chart.js

25
推荐指数
5
解决办法
6万
查看次数

ng-change不适用于ng-select

我正在使用填充的选择框ng-options.不幸的是,我无法ng-change调用我的函数.

这是我的小提琴

这是我的js:

var myApp = angular.module('myApp',[]);


function MyCtrl($scope) {

    $scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
    ];

    $scope.scopeMessage = "default text";
    var changeCount = 0;

    $scope.onSelectChange = function()
    {
       changeCount++;
        this.message = "Change detected: " + changeCount;
    }.bind($scope);

    //$scope.form = {type : $scope.typeOptions[0].value};
    $scope.form = $scope.typeOptions[0].value;
}
Run Code Online (Sandbox Code Playgroud)

这是我的HTML:

<div ng-controller="MyCtrl" class="row">
    <select ng-model='form' required ng-options='option.value as option.name …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs

13
推荐指数
2
解决办法
3万
查看次数

React Hook 依赖项 - 通用 Fetch Hook

我已经学习了许多关于如何设置我自己的自定义通用useFetch钩子的教程。我想出来的东西很好用,但它打破了一些钩子规则。大多数情况下,它不使用“正确”的依赖项集。

通用钩子接受 url、选项和依赖项。将依赖项设置为所有三个会创建一个无限刷新循环,即使依赖项没有改变

// Infinite useEffect loop - happy dependencies
const UseRequest: <T>(url: string, options?: Partial<UseRequestOptions> | undefined, dependencies?: any[]) => UseRequestResponse<T>
 = <T>(url: string, options: Partial<UseRequestOptions> | undefined = undefined, dependencies: any[] = []): UseRequestResponse<T> => {
    const [data, setData] = useState<T | undefined>();
    const [loading, setLoading] = useState<boolean>(false);
    const [error, setError] = useState<UseRequestError | undefined>();

    useEffect(() => {
        let ignore = false;
        (async () => {
            try {
                setLoading(true);
                const response = await (options …
Run Code Online (Sandbox Code Playgroud)

reactjs react-hooks

10
推荐指数
1
解决办法
338
查看次数

Javascript使用正则表达式替换非捕获组

我正在尝试删除日期字符串中的序数.

我需要验证序数之前至少有一个数字,这样我们就知道它是序数而不是单词的一部分.这是正确的正则表达式:

/(?:\d)(st|nd|rd|th)/g
Run Code Online (Sandbox Code Playgroud)

现在,当我在Javascript中对字符串进行正则表达式替换时,我最终替换了非捕获组"捕获"序数之前的前导数字,您可以在此处看到:

var inpt;

function swapText()
{
  var str = inpt.value;
  var reg = /(?:\d)(st|nd|rd|th)/g;

  str = str.replace(reg, "");
  
  inpt.value = str;
}

function init()
{
  inpt = document.getElementById('str_data');
  var btn = document.getElementById('swap_btn');
  btn.addEventListener('click', swapText, false);
}

setTimeout(init, 0);
Run Code Online (Sandbox Code Playgroud)
body {
  font:13.23px "Open Sans", Verdana, sans-serif;
}

input {
  min-height:30px;
  height:auto;
  width:auto;
  padding: 6px 8px;
  color: #424242;
}

.btn {
	display: inline-block;
	padding: 8px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.428571429;
	text-align: center;
	white-space: nowrap;
	vertical-align: …
Run Code Online (Sandbox Code Playgroud)

javascript regex

6
推荐指数
1
解决办法
2335
查看次数

ElasticSearch:汇总一组收集的结果

假设我有一组汉堡。。。

对于每个汉堡,我都有一组与汉堡每个组成部分相关的图像。

不幸的是,这些组件的结构没有任何一致性(我没有写过)。

这是两个文件的示例:

{
    "bunsResource": {
        "image": {
            "url": "./buns_1.png",
            "who": "Sam"
        },
        "buns": [
            {
                "image": {
                    "url": "./top-bun_1.png",
                    "who": "Jim"
                }
            },
            {
                "image": {
                    "url": "./bottom-bun_1.png",
                    "who": "Sarah"
                }
            }
        ]
    },
    "pattyResource": {
        "image": {
            "url": "./patties_1.png",
            "who": "Kathy"
        },
        "patties": [
            {
                "image": {
                    "url": "./patty_1.jpg",
                    "who": "Kathy"
                }
            }
        ]
    }
},
{
    "bunsResource": {
        "image": {
            "url": "./buns_2.png",
            "who": "Jim"
        },
        "buns": [
            {
                "image": {
                    "url": "./top-bun_2.png",
                    "who": "Jim"
                }
            }, …
Run Code Online (Sandbox Code Playgroud)

elasticsearch elasticsearch-aggregation

6
推荐指数
1
解决办法
187
查看次数

NodeJS / Express:从请求中获取用户名和密码

我正在使用 NodeJS 和 Express,我想从请求中获取用户名和密码参数。我已经搜索了一段时间,但找不到答案。

我想接受user来自 cURL 命令的参数:

curl --request --POST -u USERNAME:PASSWORD -H "Content-Type:application/json" -d "{\"key":\"value\"}" --url https://api.example.com/my_endpoint
Run Code Online (Sandbox Code Playgroud)

在我的应用程序中:

app.post('/my_endpoint', async (req, res, next) => {
    const kwargs =. req.body;
    const userName = req['?'];
    const password = req['?'];
});
Run Code Online (Sandbox Code Playgroud)

node.js express

6
推荐指数
1
解决办法
4251
查看次数

AngularJS Typeahead始终显示

我正在使用AngularJS typeahead指令迭代一个由API 预先填充的对象数组,以便typeahead从内存中提取所有信息.

我想,当input收益focus,将typeahead显示所有可用的结果,即使是没有valueinput.

我发现这个简单的jsfiddletypeahead,我们可以用与测试.

我尝试过使用:

<input typeahead-min-length="0" class="form-control input-sm" ng-model="query" typeahead="warehouse.info for warehouse in warehouses | filter:$viewValue" typeahead-on-select="selectedWarehouse = $item;" ng-keypress="fetchWarehouses();"/>
Run Code Online (Sandbox Code Playgroud)

..认为该属性typeahead-min-length="0"可以实现这一点,但事实并非如此.

有任何想法吗?谢谢!

javascript angularjs angular-ui-typeahead

5
推荐指数
0
解决办法
937
查看次数

CASE语句是否会丢失PostgreSQL中的别名范围?

首先,这个SQL有效:

select
    case
        when s.luserid > 0 then u.szusername
        when s.lgroupid > 0 then g.szgroup
        when s.lldapid > 0 then 'LDAP Group'
    end as name
from security s
left join users u on s.luserid = u.id
left join usergroups g on s.lgroupid = g.id
order by name
Run Code Online (Sandbox Code Playgroud)

上面的块通过别名name工作证明了排序,并且name当术语name是保留字时声明别名起作用,这与问题无关

当我在其中创建带有别名的case语句时,我的问题就出现了:

注意别名 useid

select
    case
        when sa.luserid > 0 then sa.luserid
        when sa.lgroupid > 0 then sa.lgroupid
        when sa.lldapid > 0 then sa.lldapid
    end as useid, …
Run Code Online (Sandbox Code Playgroud)

sql postgresql sql-order-by

4
推荐指数
1
解决办法
3956
查看次数

SQL中的最后排序:将值强制为顺序中的最后一个

在SQL中,我使用过

...ORDER BY name DESC NULLS LAST
Run Code Online (Sandbox Code Playgroud)

哪个工作非常棒,但有什么办法可以设定一个特定的值是最后的吗?比如空字符串(@EMPTY).

...ORDER BY name DESC (@EMPTY) LAST
Run Code Online (Sandbox Code Playgroud)

我在表上用户选择动态构建SQL,当用户更改排序顺序时,我在SQL中更改排序顺序.此外,用户可以选择要排序的列.我要排序的列将是类型text或类型int.我不需要任何花哨ORDER BY的时候column是一个类型int,但我确实需要强制的所有值""到的结束ORDER BYtypecolumntext.

谢谢!

sql sql-order-by

2
推荐指数
1
解决办法
2565
查看次数

GoLang:发送没有Mailjet库的Mailjet电子邮件

我正在尝试使用我的Mailjet凭据从我的golang应用程序发送电子邮件,但我正在尝试以正常的golang方式(是的,我知道他们的库是非常鼓励的).

我使用Mailjet库可以很好地处理电子邮件,但我的老板非常清楚我们可能永远不会留在Mailjet.如果我们切换到不同的电子邮件解决方案,我们不希望重写所有电子邮件代码,我们只想更改我们的主机名和凭据.

我的打印机使用相同的主机名和凭据通过Mailjet发送电子邮件,但由于某种原因,我的golang应用程序不会!

我的代码是从golang smtp库SendEmail示例中采用的.

这是(当然没有我的凭据):

import (
    "bytes"
    "fmt"
    "net/smtp"
)
func SendTestEmail() (bool, error) {
    fmt.Println("Send Test Email: Enter")
    success := false
    hostname := "in-v3.mailjet.com"
    auth := smtp.PlainAuth("", username, password, hostname)
    to := []string{"me@example.com"}
    msg := []byte("To: me@example.com\r\n" +
        "Subject: discount Gophers!\r\n" +
        "\r\n" +
        "This is the email body.\r\n")
    fmt.Println("Send Test Email: Sending Email")
    err := smtp.SendMail(hostname+":587", auth, "sender@example.com", to, msg)
    if err == nil {
        fmt.Println("Send Test Email: Email successfully sent!")
        success …
Run Code Online (Sandbox Code Playgroud)

email go mailjet

2
推荐指数
1
解决办法
305
查看次数

在表上生成日期直方图

我使用 Postgres CLI 编写了一个查询,该查询在终端中返回条形图。查询速度慢且效率低。我想改变这一点。

在底层,我们有一个非常简单的查询。我们希望每一行都是表中总行数的除法。假设我们的硬编码行数是N_ROWS,我们的表是my_table

另外,假设N_ROWS等于 8。

select
    (select count(id) from my_table) / N_ROWS * (N_ROWS - num) as level 
from (VALUES (0), (1), (2), (3), (4), (5), (6), (7), (8)) as t (num)
Run Code Online (Sandbox Code Playgroud)

就我而言,这将返回图表的 Y 轴:

 level
-------
 71760
 62790
 53820
 44850
 35880
 26910
 17940
  8970
     0
Run Code Online (Sandbox Code Playgroud)

您已经可以看到该查询的问题。

我可以使用编程方式生成多行N_ROWS而不是对每个行值进行硬编码吗VALUES?显然,我也不喜欢对整个表的每一行执行新的计数。

我们现在需要 X 轴,这就是我的想法:

select
    r.level,
    case
        when (
            select count(id) from my_table where created_at_utc<= '2019-01-01 00:00:00'::timestamp without time zone
        ) …
Run Code Online (Sandbox Code Playgroud)

postgresql date-histogram

2
推荐指数
1
解决办法
2022
查看次数

使用正则表达式将日期/时间字符串拆分为标记

我正在尝试将日期格式字符串(和输入日期字符串)分解为多个部分(标记)。

日期格式可以在标记之间使用任何分隔字符,只要标记有效即可。日期/时间将被解析为格式,非字母数字字符将保留到输出字符串中。我想从日期/时间格式字符串和输入日期/时间字符串中删除标记。

我需要在所有非字母数字字符集上拆分字符串

例如,假设我的日期格式字符串是:

'dddd, MMMM D, YYYY h:mm A'
Run Code Online (Sandbox Code Playgroud)

我想要字符串中所有日期/时间标记的数组。我的输出应该是:

['dddd', 'MMMM', 'D', 'YYYY', 'h', 'mm', 'A']
Run Code Online (Sandbox Code Playgroud)

我尝试了几次,但我仍然不知道如何做到这一点。我能够想出正则表达式:

[^\w]|[_]
Run Code Online (Sandbox Code Playgroud)

它应该匹配[a-zA-Z0-9_]第一个替代项中不存在的任何字符,或者_按字面匹配第二个替代项。

我已经测试了这个正则表达式并且它确实有效,但是我如何正确使用它?

我尝试使用:

var format_tokens = display_format.match(/[^\w]|[_]/g);
Run Code Online (Sandbox Code Playgroud)

..当然,这让我返回:

format_tokens = [",", " ", " ", ",", " ", " ", ":", " "];
Run Code Online (Sandbox Code Playgroud)

..这应该是显而易见的...

那么如何求逆呢?我怎样才能得到想要的结果:

format_tokens = ['dddd', 'MMMM', 'D', 'YYYY', 'h', 'mm', 'A']
Run Code Online (Sandbox Code Playgroud)

谢谢大家!

javascript regex date

1
推荐指数
1
解决办法
1385
查看次数

在JavaScript中阻止级别范围访问

我知道你会认为这是重复的,但我通过许多相关帖子找到的是人们用没有受过教育的"不"来淹没每个人,我很高兴这里还没有发生.无论哪种方式,我想重新讨论这个问题.

让我们举例说一下"不为人所知"的let陈述:

function foo()
{
    var bar = 5;

    if(true)
    {
        let bar = 10;
        alert(bar);
    }

    alert(bar);
}
Run Code Online (Sandbox Code Playgroud)

此功能将首先发出警报10然后发出警报5.

这是因为bar = 5功能级别范围内,而重新分配bar = 10仅保留在块级别范围内,这要归功于我们的小伙伴let.

话虽如此,JavaScript中的块级范围绝对存在,但我们如何访问它呢?

举个例子:

var arr = [
    {
        label: "x"
    },
    {
        label: "y"
    },
    {
        label: "z"
    },
];

var randIdx = Math.floor(Math.random() * 3);

for(var i = 0; i < arr.length; i++)
{
    if(i === randIdx) …
Run Code Online (Sandbox Code Playgroud)

javascript

0
推荐指数
1
解决办法
59
查看次数