我有一个barChart,我想在x轴上重复多个值,我的dataChart是这样的:
this.dataChart = [
{valueX: 'Ene.17', valueY: 0.00},
{valueX: 'Dic.16', valueY: 0.00},
{valueX: 'Nov.16', valueY: 0.00},
{valueX: 'Oct.16', valueY: 0.00},
{valueX: 'Sep.16', valueY: 0.00},
{valueX: 'Sep.16', valueY: 0.00}
];
this is the image with this values
我需要显示另一个“ 9月16日”,这是我的代码的一部分:
createChart() {
this.updateConfig();
let i = 0;
this.dataChart.forEach(row => {
row['id'] = i;
i ++;
});
this.ind = d3.range(this.dataChart.length);
const element = this.chartContainer.nativeElement;
this.width = element.offsetWidth - this.margin.left - this.margin.right;
this.height = element.offsetHeight - this.margin.top - this.margin.bottom;
this.xScale = d3.scaleBand().range([0, this.width]).padding(this.padding);
this.yScale = d3.scaleLinear().range([this.height, 0]);
this.xAxis = d3.axisBottom(this.xScale);
this.yAxis = d3.axisLeft(this.yScale).tickSize(-this.width).ticks(4).tickFormat(d => d + this.tickFormat);
this.svg = d3.select(element).append('svg')
.append('g')
.attr('transform', `translate(${this.margin.left}, ${this.margin.top})`);
}
createScale() {
this.updateAxis();
this.svg.append('g')
.attr('class', 'y axis')
.call(this.yAxis);
this.svg.append('g')
.style('font-size', () => {
return '14px';
})
.attr('class', 'x axis')
.attr('transform', `translate(0, ${this.height})`)
.call(this.xAxis);
}
updateAxis() {
let maximumY = d3.max(this.dataChart, function (d) {
if (d['valueY'] !== undefined) {
return d['valueY'];
} else {
return 50;
}
});
if ( maximumY === 0 ) {
maximumY = 50;
}
this.yScale.domain([-(maximumY as any * .03), maximumY as any * 1.2]);
this.xScale.domain(this.dataChart.map(d => {
console.log('de', d['valueX']);
return d['valueX'];
}));
}
重要的部分是当我在createScale上执行时:call(this.xAxis)仅调用5个值... PD:我在用angular5 ..