如何在 javascript 中创建带有自定义值和轴标签的自定义柱形折线图？

Question

我想知道是否可以使用像 highcharts, google charts, amcharts or d3js 这样的 javascript 库来创建如下图表：

正如您在图片中看到的，顶部有每列中绘制的 3 个值的摘要，因此需要在顶部有自定义轴标签，以便显示所有这些信息。

绘制的每个值还有一个矩形框，其中包含值（这是它的价格）、它的名称和它所属的 Segment。

Answer 1

您当然可以使用 ZingChart 创建此图表。 Here's my rendition of your chart。请务必单击 JavaScript 选项卡以查看图表 JSON 及其呈现方式。此外，在 HTML 选项卡上，请注意 ZingChart 有一个可用的 CDN，因此很容易开始使用该库。为了使它更容易，您可以单击右上角的 JSFiddle 按钮将所有内容复制到 JSFiddle，这样您就可以开始自己玩弄图表了。

由于此图表的复杂性，我不得不将其分解为多个 graphset object。第一个 object 创建标题和副标题：

{
  "type":null,
  "x":0,
  "y":0,
  "height":36,
  "width":"100%",
  "background-color":"none",
  "title":{
    "text":"Prices for Camera Segment",
    "height":20,
    "background-color":"#000661"
  },
  "subtitle":{
    "text":"Cameras",
    "background-color":"#234979",
    "color":"white",
    "y":20,
    "height":16
  }
}

graphset 中的下一个 object 创建列 headers 行，以及 "PRICES" 行标签：

{
    "type":"grid",
    "x":0,
    "y":36,
    "height":100,
    "width":"100%",
    "background-color":"none",
    "options":{
        "header-row":false,
        "col-widths":["10%","22.5%","22.5%","22.5%","22.5%"],
        "style":{
            ".tr":{
                "height":20,
                "align":"center"
            },
            ".td_1_0":{
              "height":60
            }
        }
    },
    "series":[
        {
            "values":[
                "Price (SAR)",
                "Konica",
                "Nikon",
                "Canon",
                "Konica"
            ]
        },
        {
          "values":["PRICES"]
        }
    ]
}

下一个 object 使用相机信息创建网格，使用 x、y、height 和 width 属性放置和调整大小，因此它与之前的网格重叠，只留下 "PRICES" 行标签可见：

{
  "type":"grid",
  "x":"10%",
  "y":56,
  "height":60,
  "width":"90%",
  "background-color":"none",
  "options":{
    "header-row":false,
    "col-widths":[
      "7%","11%","7%",
      "7%","11%","7%",
      "7%","11%","7%",
      "7%","11%","7%"
    ],
    "style":{
      ".td_1_0":{
        "height":20
      }
    }
  },
  "series":[
    {
      "values":[
        "USER",
        "KM1",
        "NA",
        "USER",
        "COOLPIX",
        "200",
        "USER",
        "CM1",
        "250",
        "USER",
        "KM1",
        "150"
        ]    
    },
    {
      "values":[
        "ENTRY",
        "KM2",
        "NA",
        "ENTRY",
        "D300",
        "400",
        "ENTRY",
        "CM2",
        "450",
        "ENTRY",
        "KM2",
        "350"
      ]
    },
    {
      "values":[
        "PRO",
        "KM3",
        "NA",
        "PRO",
        "D1",
        "1,200",
        "PRO",
        "CM3",
        "1,250",
        "PRO",
        "KM3",
        "1,150"
      ]
    }
  ]
}

最后，图表本身是一个折线图，带有适当样式和大小的标记：

{
  "type":"line",
  "x":0,
  "y":116,
  "height":484,
  "width":"100%",
  "background-color":"white",
  "plotarea":{
    "margin-top":20,
    "margin-left":"10%",
    "margin-right":0
  },
  "plot":{
    "value-box":{
      "color":"black",
      "text":"%data-level<br>%data-camera<br>%v",
      "placement":"middle",
      "font-weight":"none"
    },
    "marker":{
      "type":"rectangle",
      "height":40,
      "width":120,
      "background-color":"white",
      "border-with":2,
      "border-color":"black",
      "line-style":"dotted"
    },
    "hover-marker":{
      "visible":false
    },
    "hover-state":{
      "visible":false
    },
    "tooltip":{
      "visible":false
    },
    "line-color":"black",
    "line-style":"dashed",
    "line-width":2
  },
  "scale-y":{
    "guide":{
      "visible":false
    },
    "label":{
      "text":"Price"
    }
  },
  "scale-x":{
    "markers":[
      {
        "type":"line",
        "range":[0.5],
        "line-width":2,
        "line-color":"#F2F2F2"
      },
      {
        "type":"line",
        "range":[1.5],
        "line-width":2,
        "line-color":"#F2F2F2"
      },
      {
        "type":"line",
        "range":[2.5],
        "line-width":2,
        "line-color":"#F2F2F2"
      }
    ],
    "labels":["Konica", "Nikon","Canon","Konica"],
    "guide":{
      "visible":false
    },
    "offset-start":90,
    "offset-end":90
  },
  "series":[
    {
      "values":[null, 200, 250, 150],
      "data-level":"USER",
      "data-camera":[null,"COOLPIX", "CM1", "KM1"]
    },
    {
      "values":[null, 400, 450, 350],
      "data-level":"ENTRY",
      "data-camera":[null, "D300","CM2","KM2"]
    },
    {
      "values":[null, 1200, 1250, 1150],
      "data-level":"PRO",
      "data-camera":[null, "D1","CM3","KM3"]
    }
  ]
}

现在，公平竞争，我是 ZingChart 团队的一员，并且我已经使用该库构建图表一段时间了。但是，ZingChart 的样式属性非常 CSS-like，所以如果您熟悉 CSS 属性，那么您已经有了一个良好的开端。查看我们的 http://www.zingchart.com/docs，如果您有任何问题，请告诉我。

如何在 javascript 中创建带有自定义值和轴标签的自定义柱形折线图？

How to create a custom column line chart with custom value and axis labels in javascript?

javascript

charts

column-chart