标签: charts

我正在使用谷歌可视化条形图,我想自定义或更改单击栏时出现的工具提示文本和格式.

我一直在通过文档,但我没有找到实现这一点的方法.你知道吗:

1. 它甚至可能吗？
2. 如果是这样,你能提供一些代码示例吗？

在谷歌图表API图片目前已弃用,并计划在退休上二○一五年四月二十○日.

是否还有其他免费服务可以替换它并允许仅通过在URL中提供参数来生成图表图像？

以下是用于生成PNG图像的URL的示例,它可以用作HTML img源,尤其在电子邮件中非常有用:

http://chart.apis.google.com/chart?chxl=1:|Apr+04|Apr+05|Apr+06|Apr+07|Apr+08|Apr+09&chxp=1,0,20,40 ,60,80,100及反馈网站0,0,45&chxs = 1,676767,11.5,0,LT,676767&chxt = Y,X&CHS = 550x198&CHT = LS&CHCO = 3366CC,FF9900&CHDS = 0,45,0,45&CHD = T:7,12, 11,9,13,7 | 11,26,45,24,22,27&chdl =访问++++ |页+查看&chdlp = T && chdls = 333333,16&CHG = 100,20,0,0&的Chls = 4 | 2

这将生成以下图像,可以通过<img>标签轻松添加,并支持所有浏览器和电子邮件客户端.

我使用Chart.js来显示雷达图.我的问题是有些标签很长:图表无法显示或显得非常小.

那么,有没有办法打破线条或为标签分配最大宽度？

谢谢您的帮助!

我正在使用气泡图并且必须隐藏y轴线.我尝试了以下但它不起作用.

yAxes: [{
  angleLines: {
    display: false
  }
}]

我一直在尝试在我们的内部网络上使用漂亮的图表在GWT中工作.

玩GWT-Ext的图表很不错,但它需要闪存并且控制起来非常麻烦(一般来说看起来很麻烦).

我想知道哪些东西适用于最少的依赖项,它也必须在没有连接到Web的情况下工作(因此,Google的图表API不是解决方案).

编辑:的确,我宁愿一个所有客户端的库.

我在Google Chart Tools上找到了以下JavaScript代码:

  function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows(4);
    data.setValue(0, 0, '2004');
    data.setValue(0, 1, 1000);
    data.setValue(0, 2, 400);
    data.setValue(1, 0, '2005');
    data.setValue(1, 1, 1170); // sales for 2005
    data.setValue(1, 2, 460);
    data.setValue(2, 0, '2006');
    data.setValue(2, 1, 860);
    data.setValue(2, 2, 580);
    data.setValue(3, 0, '2007');
    data.setValue(3, 1, 1030);
    data.setValue(3, 2, 540);

    var chart = new google.visualization.ImageLineChart(document.getElementById('visualization'));
    chart.draw(data, {width: 500, height: 250, min: 0});
  }

如果我注释掉设置2005年销售额的代码行,则销售线将显示在从2006年开始到2007年结束的图表上.我期望看到从2004年(在Y = 1000)到2006年的销售线(在Y …

我正在尝试设计样式并在Google区域图表中添加另外2个x轴(图像中的a和b).例如,a轴应设置为900,b:700.

还尝试将图表扩展到包含div(960px)的整个宽度,但我的解决方案似乎什么都不做.

这是期望的效果.

目前的js

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
            ['November',  1000,      400],
            ['December',  1170,      460],
            ['January',  660,       1120],
            ['February',  690,       1120],
            ['March',  780,       1120],
            ['April',  820,       1120],
            ['May',  660,       1120],
            ['June',  1030,      540]
    ]);

    var options = {
      title: '',
      backgroundColor: 'none',
      width:'960',
      legend: {position: 'none'},
      hAxis: {title: 'Year',  titleTextStyle: {color: 'grey'},
      }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

我正在使用下面的代码生成带有一些注释的简单图表:

require(ggplot2); data(mtcars)
ggplot(mtcars, aes(x = wt, y = mpg)) + 
  geom_point() +
  annotate("text", x = 4, y = 25, label = "This should be bold\nand this not",
           colour = "red") +
  geom_vline(xintercept = 3.2, colour = "red")

在该图表上,我想将粗体字体应用于文本注释中短语的第一部分:

这应该是大胆的

但我希望文本的其余部分在字体和样式方面保持不变.

我有一个来自Cyril惊人答案的家谱,但我正在试图弄清楚如何调整它以支持多个合作伙伴.在这种情况下,我添加了一个"情妇"节点,并试图表示"女主人"和"约翰"有一个名为"隐藏的儿子"的孩子.

当前的数据结构如下:

在那里,root对象存储一切.它有一个children数组,其中包含没有父母的最"代".它还包含一个包含这些兄弟对象/节点的子对象的对象.在上面的例子中,这是root.children[2].

我想我将不得不重构数据结构children并注入有关孩子的父母的信息.只是在概念化这个以及线路时遇到了麻烦

最终将是这样的,除了情妇将在左侧:

请参考这个小提琴:https://jsfiddle.net/4mxhogmd/1/

我正在研究chart.js如果你在小提琴中看到,你会注意到在某些情况下没有正确显示条形图上的值(在画布外面)虽然研究我遇到了这个链接如何在Chart上显示数据值.js文件

但是在这里他们也使用工具提示同样的情况来调整栏内的文本.我不想要这个.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
        datasets: [{
            data: [6, 87, 56, 15, 88, 60, 12],
            backgroundColor: "#4082c4"
        }]
    },
    options: {
        "hover": {
            "animationDuration": 0
        },
        "animation": {
            "duration": 1,
            "onComplete": function () {
                var chartInstance = this.chart,
                ctx = chartInstance.ctx;

                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center'; …