IBM Cognos Analytics с проблемой высоты столбчатой ​​диаграммы D3.js - PullRequest
Новая
       117

IBM Cognos Analytics с проблемой высоты столбчатой ​​диаграммы D3.js

0 голосов
/ 24 октября 2018

У меня проблемы с настройкой образца гистограммы D3 в IBM Cognos Analytics.Я отредактировал образец D3 из Cognos, чтобы включить заголовки для значений, но, к сожалению, я не могу заставить данные отображаться правильно.Похоже, прямоугольники правильно назначены значениям, но высота каждого бара одинакова.Из-за этого это выглядит как 1 большой бар.

Кто-нибудь знает, как это исправить?Я попытался просмотреть некоторые примеры на bl.ocks.org, но он просто не работает (например, я попытался скопировать https://bl.ocks.org/caravinden/eb0e5a2b38c8815919290fa838c6b63b)!

Вот как это выглядит:

enter image description here

define( ["https://censored/samples/javascript/lib/d3.min.js"], function( d3 ) {
"use strict";

function D3BarChart()
{
};

D3BarChart.prototype.draw = function( oControlHost )
{
    var o = oControlHost.configuration;
    var margin = {top: 20, right: 150, bottom: 30, left: 80},
        width = 1040 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scaleLinear()
        .domain( [0, d3.max( this.m_aValues )])
        .range( [0, width] );

    var y = d3.scaleBand()
    //  .domain(data.map(function(d) { return this.m_aLabels;}))
        .rangeRound([height, 0])
        .padding(0.1);

    var xAxis = d3.axisBottom(x);

    var yAxis = d3.axisLeft(y);

    var svg = d3.select(oControlHost.container).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.selectAll( ".bar" )
    .data( this.m_aValues)
    .enter().append( "rect" )
    .attr("class", "bar")
    .attr("y", function(d) { return this.m_aLabels; })
    .attr( "width", function(d) { return x(d); } )
    .attr( "height", y.bandwidth())
    .text( function( d ) { return d; } );

    svg.append("g")
      .attr("class", "y axis")
      .call((yAxis)
        .tickSize(3)
        .tickPadding(6));
};

D3BarChart.prototype.setData = function( oControlHost, oDataStore )
{
               this.m_oDataStore = oDataStore;
               this.m_aValues = [];
               this.m_aLabels = [];
               var iRowCount = oDataStore.rowCount;
               for ( var iRow = 0; iRow < iRowCount; iRow++ )
               {
                              this.m_aLabels.push( oDataStore.getCellValue( iRow, 0 ) );
                              this.m_aValues.push( oDataStore.getCellValue( iRow, 1 ) );
               }
};

return D3BarChart;
});

1 Ответ

0 голосов
/ 24 октября 2018

Ваши данные не подходят.Похоже, у вас есть два массива, вам нужен один массив с каждой точкой данных: 

this.data = [];
var iRowCount = oDataStore.rowCount;
for ( var iRow = 0; iRow < iRowCount; iRow++ )
{
  this.data.push( {label: oDataStore.getCellValue( iRow, 0 ), value: oDataStore.getCellValue( iRow, 1 ) } );
}

Тогда ваши домены станут: 

var x = d3.scaleLinear()
    .domain( [0, d3.max(this.data, function(d) { return d.value; } ])
    .range( [0, width] );

var y = d3.scaleBand()
    .domain(this.data.map(function(d) { return d.label; }))
    .rangeRound([height, 0])
    .padding(0.1);

Наконец, ваши бары станут; 

svg.selectAll( ".bar" )
  .data( this.data )
  .enter().append( "rect" )
  .attr("class", "bar")
  .attr("y", function(d) { return y(d.label); })
  .attr( "width", function(d) { return x(d.value); } )
  .attr( "height", y.bandwidth())
  .text( function( d ) { return d.label; } );
...