使用X,Y和Series生成图表3

时间:2018-03-23 11:53:49

标签: javascript d3.js c3.js

我有这个json

    [{
    "serie": "Advertencia",
    "x": 4,
    "y": 15
}, {
    "serie": "Advertencia",
    "x": 6,
    "y": 18
}, {
    "serie": "Advertencia",
    "x": 5,
    "y": 19
}, {
    "serie": "Advertencia",
    "x": 10,
    "y": 23
}, {
    "serie": "Advertencia",
    "x": 12,
    "y": 25
}, {
    "serie": "Advertencia",
    "x": 7,
    "y": 25
}, {
    "serie": "Advertencia",
    "x": 9,
    "y": 25
}, {
    "serie": "Advertencia",
    "x": 3,
    "y": 26
}, {
    "serie": "Advertencia",
    "x": 8,
    "y": 27
}, {
    "serie": "Advertencia",
    "x": 1,
    "y": 29
}, {
    "serie": "Advertencia",
    "x": 11,
    "y": 32
}, {
    "serie": "Advertencia",
    "x": 2,
    "y": 33
}, {
    "serie": "Suspensao",
    "x": 5,
    "y": 1
}, {
    "serie": "Suspensao",
    "x": 2,
    "y": 2
}, {
    "serie": "Suspensao",
    "x": 8,
    "y": 3
}, {
    "serie": "Suspensao",
    "x": 4,
    "y": 3
}, {
    "serie": "Suspensao",
    "x": 7,
    "y": 4
}, {
    "serie": "Suspensao",
    "x": 9,
    "y": 4
}, {
    "serie": "Suspensao",
    "x": 3,
    "y": 4
}, {
    "serie": "Suspensao",
    "x": 1,
    "y": 5
}, {
    "serie": "Suspensao",
    "x": 10,
    "y": 5
}, {
    "serie": "Suspensao",
    "x": 11,
    "y": 5
}, {
    "serie": "Suspensao",
    "x": 12,
    "y": 6
}, {
    "serie": "Suspensao",
    "x": 6,
    "y": 6
}]

这个json是从我的数据库查询生成的。包含XYSeries的一个列表 我希望以这种方式生成c3 chart这个json数据。 我尝试按照此文档c3 json data,但json数据有很多不同。

我做了手动json数据,这是预期的结果: chart

有人可以使用此处引用的格式json生成如上所示的c3图表吗?

Edit1:这是我可以使用c3生成的代码,但我手动执行json数据:

var chart = c3.generate({
      bindto: '#chart2',
      data: {
        type: 'line',
        labels: true,
        json: [
          {
            x:1, Suspensao: 10, Advertencia:3
          },
          {
            x:2, Suspensao: 3, Advertencia:5
          }
        ],
        keys: {
          x: 'x', // it's possible to specify 'x' when category axis
          value: ['Advertencia', 'Suspensao']
        }
      },
      axis: {          
      }
    });

Edit2:类似于morris图表:

new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'year',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Value']
});

0 个答案:

没有答案