C3图表Axis自定义选项

时间:2016-03-10 10:13:17

标签: javascript jquery c3.js

我目前正在制作一个二维图表,但我发现使用c3.Js库构建它时存在限制。

我的图表包含三种类型的数据,包括:数量,参与度,网站覆盖率

Y轴应显示Volume,X轴应显示websitcoverage,Scatter Plot应显示Engagement。

目前我制作了如下图表: enter image description here

但是我需要绘图位置取决于X轴。我该怎么做?

var chart2 = c3.generate({
                    bindto:'#plotChart',
                    data: {

                        // iris data from R
                        columns:[mentionArr,engagementArr],


                        axes: {
                            mention: 'y',
                        },
                        type: 'scatter',

                    },
                            point: {
                                r: function(d) { 
                                   return d.value * 0.02; //need to replace d to something else, maybe data from API 
                                }
                            },
                            color: {
                                pattern: ['#1f77b4', '#2ca02c', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
                            },
                            grid: {
                        y: {

                                 show: true
                        }
                    },
                    axis: {
                        y: {
                            label: {
                                    text: 'Participants Count',
                                    //position: 'outer-center',
                                },

                            },
                            y2: {
                                show: true
                            },
                        x: {
                        label: {
                                    text: 'Website Coverage',
                                    position: 'outer-center',
                                },

                             type: 'category',
                        categories: coverageArr

                        }
                    },
                       legend: {
                         position: 'right'
                    }
                });

上面的代码就是我如何构建它。

0 个答案:

没有答案