Question

我是编程新手，由于我缺乏技能和知识，我一直困扰着我的问题。我试图在amcharts =＆gt;＆gt;中创建这样的表格。 This is the chart I need to create

但我只能成功创建一个像这样的表=＆gt;＆gt; This is the chart I have made using amcharts 问题是我不知道如何为图表生成表格。我已经看过一些关于如何生成表格的教程，但图表有一个类别，我不知道如何做到这一点。

这是我编写的代码，当我添加addInitHandler时它没有执行 `

mask32 = 2**32 - 1
next unless ip.to_i == mask32

`

Answer 1

您的数据未显示的原因是数据定义中的额外}];行导致语法错误。您可以使用浏览器的开发人员工具栏/控制台（通常可通过点击F12访问）来发现这一点。删除违规行将使图表和表格正常工作，但您需要对CSS，图表边距和设置进行微调，以使 close 得到您正在寻找的内容。

传奇不能放在表格中，但您可以通过在模仿彩色框的行标题中添加<span>来模仿外观。这是表插件中的修改行：

td.innerHTML = '<span style="width: 12px; height: 12px; background:' + chart.graphs[i].color + ';  display:inline-block; margin-right:6px"></span>' + chart.graphs[i].title;

您需要删除图表自己的legend定义。

从那里开始，我在您的配置中添加synchronizeGrid: true来同步网格线，禁用图表的autoMargins设置并设置我自己的边距以帮助将图表与表格对齐：

var chart = AmCharts.makeChart("chartdiv", {
    // other config omitted
    "synchronizeGrid": true,
    "autoMargins": false,
    "marginLeft": 150,
    "marginBottom": 55,
    "marginRight": 60,
    // ...

接下来，我将您的categoryAxis'tickPosition更新为"start"，以便标签显示在所需的屏幕截图之间。之后，我增加了指南“tickLength，以便它可以连接到您的表格并调整labelOffset，同时增加tickLength向下移动标签。请注意，tickAlpha和其他alpha值的范围为0-1。 5与1：

相同

  "categoryAxis": {
    "gridPosition": "start",
    "tickPosition": "start",
    "tickLength": 15,
    "axisAlpha": 0.5,
    "gridAlpha": 0,
    "fontSize": 12,
    "boldLabels": "bold",
    "guides": [{
      "category": "Main Office-25",
      "toCategory": "Main Office-30",
      "lineAlpha": 1,
      "tickLength": 60,
      "expand": true,
      "label": "Chowking Main Office",
      "labelOffset": -30

    }, {
      "category": "Operations-25",
      "toCategory": "Operations-30",
      "lineAlpha": 1,
      "tickLength": 60,
      "expand": true,
      "label": "Chowking Operations",
      "labelOffset": -30
    }],

最后，我为插件中的数据单元添加了一个类，并更新了CSS，使表格字体与图表的默认字体匹配，并调整单元格大小，使网格更紧密排列。你可以更好地微调它，但这似乎足够好。

这是我所有变化的小提琴：https://jsfiddle.net/m5nm9chL/3/

这几乎是你最接近你想要的截图，但随时可以进一步调整CSS /边距。

如何在amcharts中生成包含4个标准的表

1 个答案: