小编Zel_iax的帖子

使用chart.js v2删除图表上的图例

我正在使用Bootstrap,JQuery和Chart.js(v2)制作主页.我让我的实现使用v1,但最近刚进入Bower并使用它下载了v2.

我正在制作一个包含饼图的4列网格,但是v2中的缩放对我来说有点令人困惑.我希望图表能够快速响应,以便它们可以与平板电脑和智能手机等小型设备一起正确扩展,我的一个问题就是摆脱图表的图例以及将鼠标悬停在我的各个部分上时的悬停信息图表.

的index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

Run Code Online (Sandbox Code Playgroud)

如果我删除空的"标签"字段,则图表不再起作用.从它的外观来看,图表顶部有一个小间距,可以表明标题是写的,但它们只是空字符串.

有没有人知道如何删除图例和悬停描述？我根本无法理解如何使用它

我一有时间就会抓住一个小伙伴!

编辑:链接到文档:https://nnnick.github.io/Chart.js/docs-v2/#getting-started

javascript css jquery charts chart.js2

87
推荐指数

4
解决办法

9万
查看次数

远离Bower(已停产)使用Yarn/Npm(.Net Core MVC)VS2017

我大约1年前开始研究.Net Core应用程序.我使用.Net Core在visual studio中设置我的项目,并使用Bower来管理我的客户端软件包.似乎bower是维持/停止和"负责人"建议使用yarn或webpack代替.

所以我的问题是如何开始使用yarn而不是bower？(如果更合适,则为npm)

当我开始我的项目时,我通过输入以下内容从Visual Studio包管理器中使用了bower:

bower install <package-name>

Run Code Online (Sandbox Code Playgroud)

它设法在我的wwwroot/lib/文件夹中安装文件/目录.我只需要为我添加依赖项_Layout.cshtml,一切都完美无缺.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
    asp-fallback-test="window.jQuery">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
</script>

Run Code Online (Sandbox Code Playgroud)

我发现很难弄清楚如何使用yarn或npm在Visual Studio 2017中实现相同的"简单性".我已经可以通过BundlerMinifier.CoreNuGet包访问缩小文件了,我相信它会自动为我的文件中的文件做到,所以这不是我想要使用的解决方案的要求.

我试过谷歌搜索,但似乎这不是一个非常普遍的问题.我找到的所有链接建议使用npm并设置gulp来移动文件wwwroot/lib/,我尝试了但是我在这样做时遇到了一些奇怪的错误.

我如何使用yarn与我相似的方式安装软件包bower？或者我应该使用npm？

npm bower asp.net-core-mvc yarnpkg visual-studio-2017

43
推荐指数

1
解决办法

7877
查看次数

打印Kafka Stream输入到控制台？

我一直在查看我正在研究的Java应用程序的很多Kafka文档.我已经尝试进入Java 8中引入的lambda语法,但是我在这方面有点粗略,并且不会觉得它应该是我现在使用的那样.

我有一个Kafka/Zookeeper服务运行没有任何麻烦,我想要做的是编写一个小的示例程序,基于输入将写出来,但不做一个wordcount,因为已经有这么多的例子.

至于样本数据,我将得到一串以下结构:

示例数据

This a sample string containing some keywords such as GPS, GEO and maybe a little bit of ACC.

Run Code Online (Sandbox Code Playgroud)

题

我希望能够提取3个字母的关键字并用a打印出来System.out.println.如何获取包含输入的字符串变量？我知道如何应用正则表达式,甚至只是搜索字符串来获取关键字.

码

public static void main(String[] args) {
    Properties props = new Properties();
    props.put(StreamsConfig.APPLICATION_ID_CONFIG, "app_id");
    props.put(StreamsConfig.BOOTSTRAP_SERVERS_CONFIG, "0:0:0:0:0:0:0:1:9092");
    props.put(StreamsConfig.ZOOKEEPER_CONNECT_CONFIG, "0:0:0:0:0:0:0:1:2181");
    props.put(StreamsConfig.KEY_SERDE_CLASS_CONFIG, Serdes.String().getClass().getName());
    props.put(StreamsConfig.VALUE_SERDE_CLASS_CONFIG, Serdes.String().getClass().getName());

    final Serde<String> stringSerde = Serdes.String();

    KStreamBuilder builder = new KStreamBuilder();

    KStream<String, String> source = builder.stream(stringSerde, stringSerde, "in-stream");

    KafkaStreams streams = new KafkaStreams(builder, props);
    streams.start();

    //How do I assign the input from …

Run Code Online (Sandbox Code Playgroud)

java stream apache-kafka apache-kafka-streams

12
推荐指数

1
解决办法

1万
查看次数

在li标签内设置<a>的字体颜色

我的标记看起来像:

<div class="c1">
      <li class="c2"><a href="">blah</a></li>
</div>

Run Code Online (Sandbox Code Playgroud)

我希望文本等等是红色的.

c1用于其他地方,所以我想尽可能地向下钻取而不影响其他标记.

11
推荐指数

1
解决办法

8万
查看次数

在.Net Core中包含Google Maps的正确方法？

我有一个.Net Core应用程序，在我的一种观点中，我想拥有一个Google Map，可以在其中绘制动态折线。

Index.cshtml

我在视图中添加了Google Map，如下所示：

<div class="col-md-6 col-lg-6">
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
</div>

<script>
  function initMap() {
    var center = { lat: 55.92965249, lng: 12.47840507 };
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: uluru
    });

    $.get()
    $.post()

    route.setMap(map);
  }
</script>

Run Code Online (Sandbox Code Playgroud)

在我的_Layout.cshtml中，我有：

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=...api key...&callback=initMap">
</script>

Run Code Online (Sandbox Code Playgroud)

所有这些都按预期工作，但是我不确定这是否是在.Net Core应用程序中显示Google Maps的正确方法吗？

此外，我希望能够在我的Google Maps实现中绘制动态路线。这是通过以下代码完成的

var route = new google.maps.Polyline({
    path: routeCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
});

Run Code Online (Sandbox Code Playgroud)

其中routeCoordinates是坐标列表：

var routeCoordinates = [
    {lat: 55.92965249, …

Run Code Online (Sandbox Code Playgroud)

c# asp.net-mvc google-maps razor .net-core

6
推荐指数

1
解决办法

6716
查看次数

React Hooks - 将 ref 传递给孩子以使用 ScrollIntoView

我有两个组件。一个父母和一个孩子。

在父组件内，我有一个按钮。如果用户单击该按钮，我想对子组件内的另一个按钮执行 ScrollIntoView。

我想我想定义对子按钮 a 的引用，以便我在父按钮 onClick 中可以执行以下操作：

ref.scrollIntoView({block: 'end', behavior: 'smooth'});

Run Code Online (Sandbox Code Playgroud)

这将滚动到子组件中的按钮。

这是一个缩小的例子：

父组件.jsx

import React, {useRef} from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = props => {
  const childReference = useRef(null);

  const onClick = () => {
    childReference.scrollIntoView({block: 'end', behavior: 'smooth'});
  }

  return (
    <>
      <...some other components>
      <Button onClick={onClick}>Click me to be forwarded</Button>
      <ChildComponent ref={childReference}/>
    </>
  );
};

Run Code Online (Sandbox Code Playgroud)

子组件.jsx

import React from 'react';

const ChildComponent = (props, ref) => {

  const { name, value, description } …

Run Code Online (Sandbox Code Playgroud)

reactjs js-scrollintoview react-ref react-hooks

6
推荐指数

1
解决办法

8388
查看次数

计算坐标列表之间的地理距离（纬度、经度）

我正在编写一个 Flask 应用程序，使用从 GPS 传感器提取的一些数据。我能够在地图上绘制路线，并且想要计算 GPS 传感器行驶的距离。一种方法可能是只获取开始和结束坐标，但是由于传感器的移动方式，这是非常不准确的。因此，我对每 50 个传感器样本进行采样。如果真实传感器样本大小为 1000，我现在将拥有 20 个样本（通过提取每个 50 个样本）。

现在我希望能够将我的样本列表通过函数来计算距离。到目前为止，我已经能够使用包 geopy，但是当我获取大型 GPS 样本集时，我确实收到“请求太多”错误，更不用说我将有额外的处理时间来处理请求，这不是我想要的想。

是否有更好的方法来计算包含纬度和经度坐标的列表元素的累积距离？

positions = [(lat_1, lng_1), (lat_2, lng_2), ..., (lat_n, lng_n)]

我找到了许多不同的仅使用 2 个坐标（lat1、lng1、lat2 和 lng2）计算距离的数学方法，但没有一个支持坐标列表。

这是我当前使用 geopy 的代码：

from geopy.distance import vincenty

def calculate_distances(trips):
    temp = {}
    distance = 0
    for trip in trips:
        positions = trip['positions']
        for i in range(1, len(positions)):
            distance += ((vincenty(positions[i-1], positions[i]).meters) / 1000)
            if i == len(positions):
                temp = {'distance': distance}
                trip.update(temp)
                distance = 0

Run Code Online (Sandbox Code Playgroud)

trips是一个列表元素，包含有关行程的信息键值对的字典（持续时间、距离、起点和终点坐标等），并且 …

python gps distance

5
推荐指数

1
解决办法

3648
查看次数

使用Java连接到远程HBase服务

我有一个小示例代码,我尝试建立与远程HBase实体的连接.代码在没有安装HBase的Windows机器上运行,我尝试连接到安装并运行它的远程Ubuntu服务器.以下代码段中的IP当然只是一个占位符.

代码如下:

public static void main(String[] args) {

    Configuration conf = HBaseConfiguration.create();
    HBaseAdmin admin = null;

    String ip = "10.10.10.10";
    String port = "2181";

    conf.set("hbase.zookeeper.quorum", ip);
    conf.set("hbase.zookeeper.property.clientPort", port);

    try {
        admin = new HBaseAdmin(conf);
        boolean bool = admin.tableExists("sensor_data");
        System.out.println("Table exists? " + bool);
    } catch (IOException e) {
        e.printStackTrace();
    }
}

Run Code Online (Sandbox Code Playgroud)

但由于某种原因,我得到了这个错误:

org.apache.hadoop.hbase.DoNotRetryIOException: java.lang.IllegalAccessError: tried to access method com.google.common.base.Stopwatch.<init>()V from class org.apache.hadoop.hbase.zookeeper.MetaTableLocator
at org.apache.hadoop.hbase.client.RpcRetryingCaller.translateException(RpcRetryingCaller.java:229)
at org.apache.hadoop.hbase.client.RpcRetryingCaller.callWithoutRetries(RpcRetryingCaller.java:202)
at org.apache.hadoop.hbase.client.ClientScanner.call(ClientScanner.java:320)
at org.apache.hadoop.hbase.client.ClientScanner.nextScanner(ClientScanner.java:295)
at org.apache.hadoop.hbase.client.ClientScanner.initializeScannerInConstruction(ClientScanner.java:160)
at org.apache.hadoop.hbase.client.ClientScanner.<init>(ClientScanner.java:155)
at org.apache.hadoop.hbase.client.HTable.getScanner(HTable.java:811)
at org.apache.hadoop.hbase.MetaTableAccessor.fullScan(MetaTableAccessor.java:602)
at org.apache.hadoop.hbase.MetaTableAccessor.tableExists(MetaTableAccessor.java:366) …

Run Code Online (Sandbox Code Playgroud)

java hadoop hbase

4
推荐指数

1
解决办法

5115
查看次数

引导网格中的图表周围有巨大的空白

我有一个.Net应用程序,我正在尝试使用bootstrap.js和创建图形plotly.js.

当我创建响应式图表时,我的网格中存在巨大的空白区域问题.我已经发现问题的一部分是剧情svg-container的大小默认为450px的高度.

我创造了一个小提琴,展示了巨大的空白问题.

在我的小提琴中,我有一个小的注释代码块来设置布局大小,但即使设置这似乎也没有帮助删除大部分空白区域.此外,如果它变得太小,它会开始裁掉一些图表.

//can adjust size of svg-container
//but doesn't adjust white space
//var layout = {
//  height: 350
//}

//Plotly.plot(gd, pieData, layout);

Run Code Online (Sandbox Code Playgroud)

正如你可能已经猜到的那样,我想让它更小 - 删除相当一些的空白区域,以便下面的表格看起来不那么不合适.

javascript css grid-layout twitter-bootstrap-3 plotly

3
推荐指数

1
解决办法

3899
查看次数

GraphQL 游乐场 - 将 Cookie 作为 Http 标头“消失”发送

我正在 GraphQL Playground 中测试一些实现，我想在其中发送一个特定的 cookie，以便我可以在我的解析器中获取它。我在操场上使用内置的 Http Headers 窗格：

但是，当我添加名为Cookieor 的标头cookie时，当我尝试在解析器中 console.log 时它不会显示。所有其他自定义 Http 标头都没有问题。

如上面的屏幕截图所示，出现了测试头，但没有出现 cookie 头。我正在使用cookieParser，这可能是cookie标题消失的原因，但我不确定。这是我的 console.log 部分的屏幕截图：

当我尝试 console.log 时req.cookies，我什么也没得到，这是使用 cookieParser 的好处之一。

我的 ApolloServer 实现如下：

const server = new ApolloServer({
  typeDefs: schema
  resolvers,
  dataSources: () => ({
    // ...
  }),
  context: ({req, res}) => ({
    models,
    session: req.session,
    req,
    res
  }),
  // ... and the rest is not important
});

Run Code Online (Sandbox Code Playgroud)

创建“自定义”cookie 标头可以解决问题，例如somecookie: <key>=<value>，但我认为这不是最佳做法，并且宁愿避免这种情况。我希望有人知道为什么我的 cookieheader没有出现，或者我可以做些什么让它出现？

cookies apollo graphql graphql-playground restdatasource

3
推荐指数

1
解决办法

487
查看次数

标签统计

css ×3

java ×2

apache-kafka ×1

apache-kafka-streams ×1

asp.net-core-mvc ×1

asp.net-mvc ×1

c# ×1

google-maps ×1

gps ×1

graphql-playground ×1

grid-layout ×1

js-scrollintoview ×1

npm ×1

react-hooks ×1

restdatasource ×1

twitter-bootstrap-3 ×1

visual-studio-2017 ×1

«
1
2
»