标签: charts

如何从画布中清除图表,以便无法触发悬停事件?

我正在使用Chartjs来显示折线图,这很好用:

// get line chart canvas
var targetCanvas = document.getElementById('chartCanvas').getContext('2d');

// draw line chart
var chart = new Chart(targetCanvas).Line(chartData);
Run Code Online (Sandbox Code Playgroud)

但是当我尝试更改图表的数据时会出现问题.我通过使用新数据点创建图表的新实例来更新图形,从而重新初始化画布.

这很好用.但是,当我将鼠标悬停在新图表上时,如果我碰巧检查了与旧图表上显示的点相对应的特定位置,则仍会触发悬停/标签,并且突然显示旧图表.当我的鼠标位于此位置时它仍然可见,并在离开该点时消失.我不希望显示旧图表.我想完全删除它.

在加载新画布之前,我试图清除画布和现有图表.喜欢:

targetCanvas.clearRect(0,0, targetCanvas.canvas.width, targetCanvas.canvas.height);
Run Code Online (Sandbox Code Playgroud)

chart.clear();
Run Code Online (Sandbox Code Playgroud)

但到目前为止,这些都没有奏效.关于如何阻止这种情况发生的任何想法?

javascript charts html5 chart.js

96
推荐指数
8
解决办法
11万
查看次数

93
推荐指数
4
解决办法
12万
查看次数

如何在chartjs中将起始值设置为"0"?

这是我的代码.我需要在x和y轴刻度中将初始值设置为"0".我尝试过最新的版本比例选项.

graphOptions = {               
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: false,    
            tooltipTitleTemplate: "<%= label%>",
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between …
Run Code Online (Sandbox Code Playgroud)

charts chart.js

88
推荐指数
4
解决办法
8万
查看次数

使用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万
查看次数

Android图表库

我正在努力寻找一个快速可靠的图表库.经过一番搜索,我发现4个库:AChartEngine,WilliamChart,HelloChartsAndroidPlot.我需要一些关于这些库的性能和稳定性的最新反馈,因为我能找到的所有信息都已过时.

charts android achartengine androidplot mpandroidchart

86
推荐指数
5
解决办法
11万
查看次数

甘特图与R

有没有人用R来创建甘特图?我所知道的唯一解决方案是这个,但我正在寻找更复杂的东西,如果可能的话(看起来或多或少像这样或者这样).

PS我可以没有依赖箭头.

charts r gantt-chart

80
推荐指数
8
解决办法
5万
查看次数

限制Chart.js折线图上的标签编号

我想从我得到的数据中显示我的图表上的所有点,但我不想显示它们的所有标签,因为那时图表不是很易读.我在文档中寻找它,但找不到任何限制它的参数.

我不想只拿三个标签,因为那时图表也只限于三个点.可能吗?

我现在有类似的东西:

在此输入图像描述

如果我可以留下每个第三个第四个标签,那就太好了.但我发现标签选项绝对没有.

javascript css charts canvas chart.js

80
推荐指数
7
解决办法
7万
查看次数

Matplotlib中的内联标签

在Matplotlib中,制作一个传奇(example_legend()下图)并不太难,但我认为将标签放在正在绘制的曲线上是更好的风格(example_inline()如下图所示).这可能非常繁琐,因为我必须手动指定坐标,如果我重新格式化绘图,我可能需要重新定位标签.有没有办法在Matplotlib中自动生成曲线上的标签?能够以与曲线角度对应的角度定向文本的加分点.

import numpy as np
import matplotlib.pyplot as plt

def example_legend():
    plt.clf()
    x = np.linspace(0, 1, 101)
    y1 = np.sin(x * np.pi / 2)
    y2 = np.cos(x * np.pi / 2)
    plt.plot(x, y1, label='sin')
    plt.plot(x, y2, label='cos')
    plt.legend()
Run Code Online (Sandbox Code Playgroud)

带图例的图

def example_inline():
    plt.clf()
    x = np.linspace(0, 1, 101)
    y1 = np.sin(x * np.pi / 2)
    y2 = np.cos(x * np.pi / 2)
    plt.plot(x, y1, label='sin')
    plt.plot(x, y2, label='cos')
    plt.text(0.08, 0.2, 'sin')
    plt.text(0.9, 0.2, 'cos')
Run Code Online (Sandbox Code Playgroud)

带内联标签的图

charts matplotlib coordinates

77
推荐指数
4
解决办法
6万
查看次数

在Ruby on Rails Web应用程序中生成图表的首选方法是什么?

我想在我的Ruby on Rails Web应用程序中添加一些饼图,条形图和散点图.我想要他们有魅力,容易添加,而不是引入太多开销.

你会推荐什么样的图表解决方案?
它的缺点是什么(需要Javascript,Flash,昂贵等)?

ruby charts ruby-on-rails

76
推荐指数
8
解决办法
2万
查看次数

隐藏轴和网格线Highcharts

我试图完全隐藏我的Highcharts图表的轴和网格线.到目前为止,我已经尝试将行的宽度设置为0,但它没有成功.

xAxis: {
  lineWidth: 0,
  minorGridLineWidth: 0,
  lineColor: 'transparent'
}
Run Code Online (Sandbox Code Playgroud)

是否可以全局禁用轴线/刻度线和网格线以创建"普通"图?

charts highcharts

75
推荐指数
5
解决办法
10万
查看次数