javascript-C3.js从CSV排除列

2019-10-29 02:35:52 阅读：178 来源： 互联网

我正在通过从提供的CSV文件加载数据来使用C3.JS创建多系列折线图.我可以绘制图形,但是我还没有发现是否可以仅绘制CSV中的某些列,我的图形正在绘制所有CSV列.

我的CSV如下所示：

Sex,Age,L,M,S,P3,P5,P10,P25,P50,P75,P90,P95,P97
2,0,-1.298749689,34.7115617,0.046905108,31.93019666,32.25089861,32.75948527,33.65186554,34.7115617,35.85124044,36.9534983,37.65137722,38.12110271
2,0.5,-1.440271514,36.03453876,0.042999604,33.38070525,33.68743507,34.17345861,35.02508397,36.03453876,37.11806755,38.16405088,38.82535049,39.27005698
2,1.5,-1.581016348,37.97671987,0.038067862,35.48627093,35.77560367,36.23325692,37.03281566,37.97671987,38.9853304,39.95458524,40.56517149,40.97482424
2,2.5,-1.593136386,39.3801263,0.035079612,36.98550023,37.26521982,37.70685493,38.47603153,39.3801263,40.34145495,41.2606303,41.83732218,42.22321458

而I仅绘制以年龄为X轴的百分位数(P *列)列的线,并从图中不绘制Sex,L,M和S列.

目前,我的图形如下所示：

一种解决方案是从CSV文件中删除列,但是这是不可能的,因为我将需要其他值来进行其他计算,并且我希望将所有数据保留在一个文件中.

我的C3.js代码如下所示：

var chart = c3.generate({
    data: {
                x: 'Age',
        url: '/data/cdc/cdc_female_hcageinf.csv',
                type: 'line'

        },
    tooltip: {
        show: false
    },
            point: {
        show: false
    }
});

我不确定是否有c3.js配置或方法来执行此操作,否则将需要javascript方法.

解决方法:

受@Armani的启发,我最终完成了此操作,这是将d3.csv函数与c3结合使用的方法,因为我找不到使用c3 URL的方法.

>首先,我使用D3将CSV文件加载到JSON对象中
>根据需要修改数据(不过滤)
>给C3提供json对象
>使用c3调用内的“ keys”属性仅显示我想要的字段.

d3.csv( _dataPath, function ( d ) {

  var data = d;

  if ( configdata.axis.x.source_units == "meses" && configdata.axis.x.units == "años" )
  {
    data[ configdata.axis.x.property_key ] = data[ configdata.axis.x.property_key ] / 12;
  }

  return data;

}, function( error, data ) {

  if (!error)
  {

    var percentiles = [];
    configdata.percentilesData.forEach( function( p ) {
      percentiles.push( p.name );
    });

    var x_axis_label = configdata.axis.x.label + ' (' + configdata.axis.x.units + ')';
    var y_axis_label = configdata.axis.y.label + ' (' + configdata.axis.y.units + ')';

    var chart = c3.generate({
      bindto: '#chart',
      data: {
        json: data,
        type: 'line',
        keys: {
          x: configdata.axis.x.property_key,
          value: percentiles
        }
      },
      axis: {
        y: {
          label: y_axis_label
        },
        x: {
          label: x_axis_label
        }
      },
      tooltip: {
        show: false
      },
      point: {
        show: false
      }
    });

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

标签：d3-js,graph,c3-js,javascript
来源： https://codeday.me/bug/20191029/1956865.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-C3.js从CSV排除列