如何在javascript中使用自定义值和轴标签创建自定义列线图？

Question

我想知道我是否可以使用一些javascript库,如highcharts,google charts,amcharts或d3js来创建如下图表:

正如您在图像中看到的那样,顶部部分包含每列中绘制的3个值的摘要,因此需要在顶部具有自定义轴标签,其中可以显示所有这些信息.

并且绘制的每个值也有一个矩形框,其中包含值(即其价格),名称和它所属的段.

Answer 1

您当然可以使用ZingChart创建此图表.这是我对你的图表的再现.请务必单击JavaScript选项卡以查看图表JSON及其呈现方式.此外,在HTML选项卡上,请注意ZingChart有可用的CDN,因此可以轻松开始使用该库.为了使它更容易,您可以单击右上角的JSFiddle按钮将所有内容复制到JSFiddle,以便您可以自己开始使用图表.

由于此图表的复杂性,我不得不将其分解为多个graphset对象.第一个对象创建标题和副标题:

{
  "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创建列标题行,以及"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"]
        }
    ]
}

接下来的对象创建与相机信息网格,放置并与大小x,y,height,和width属性,以便它重叠以前的网格,只留下了"价格"行标签可见:

{
  "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,因此如果您熟悉CSS属性,那么您已经有了先机.查看我们的http://www.zingchart.com/docs,如果您有任何疑问,请与我们联系.