5

highcharts、google charts、amcharts、d3jsなどの JavaScript ライブラリを使用して、次のようなグラフを作成できるかどうか疑問に思っていました。

ここに画像の説明を入力

画像でわかるように、上部には各列にプロットされた 3 つの値の概要があるため、これらすべての情報を表示できる上部にカスタム軸ラベルが必要です。 カスタム情報を含む軸ラベル

また、プロットされた各値には、値 (価格)、名前、および属するセグメントを含む長方形のボックスもあります。 カスタム情報付きのバリュー ボックス

4

1 に答える 1

6

このチャートは、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、前のグリッドと重なるようにし、「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 に非常に似ているため、CSS 属性に精通している場合は、すでに有利なスタートを切っています。http://www.zingchart.com/docs をチェックして、質問があればお知らせください。

于 2015-07-06T20:15:58.637 に答える