制作X对Y的图表 [英] make a chart of X vs Y

问题描述

我在x中有一些点，在y中有其他点。我正在尝试按照我的图像制作图表。我希望可以连接创建的图形的点。在c3.js我不知道如何绘制X对Y.我怎样才能实现像我的照片？

解决方案

此类图表的名称为散点图。

因此，您必须指定类型：

 类型：'scatter'
  

并告诉C3什么是数据阵列对：

  xs：{
 data1：data2
}，
栏：[
 ['data1'，30,200,100 ，400,150,250]，
 ['data2'，50,20,10,40,15,25] 
]，
  

这是更新的小提琴： https://jsfiddle.net / qrqquhvd /

编辑：由于评论在你身上问题我刚刚意识到你有这个要求：我想要创建的图形的点可以加入。答案很简单：仅使用C3是不可能的。你需要用D3代码做到这一点......更好的想法就是放弃C3并用D3做任何事情。

I have some points in x and others in y. I'm trying to make a chart as in the image I have. I want the points of the created graph can be joined. in c3.js I do not know how to plot X vs Y. How can I achieve something like my photo?

https://jsfiddle.net/8tqguqww/

var pointsx=[1,2,3,4,5,4,3,2,1]
var pointsy=[2,3,4,7,8,9,8,7,3]

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    },
    point: {
        show: true
    }
});

解决方案

The name of this kind of chart is scatter plot.

Therefore, you'll have to specify the type:

type: 'scatter'

And tell C3 what are the data array pairs:

xs: {
  data1: "data2"
},
columns: [
  ['data1', 30, 200, 100, 400, 150, 250],
  ['data2', 50, 20, 10, 40, 15, 25]
],

Here is the updated fiddle: https://jsfiddle.net/qrqquhvd/

EDIT: Because of the comment in your question I just realized that you have this requirement: "I want the points of the created graph can be joined". The answer is simple: it's impossible using just C3. You'll have to do that with D3 code... an even better idea is just dropping C3 and doing everything with D3.

这篇关于制作X对Y的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！