Question

我正在使用带有线和散点图的multichart。折线图工作正常，但散点图数据无法正确绘制x轴数据。

有人可以提供一个非github上的工作示例吗？以下是选择：

$scope.options = {
                chart: {
                    type: 'multiChart',
                    height: 450,
                    margin: {
                        top: 30,
                        right: 60,
                        bottom: 50,
                        left: 70
                    },
                    color: d3.scale.category10().range(),
                    //useInteractiveGuideline: true,
                    duration: 500,
                    xAxis: {
                        ticks: 10,
                        tickFormat: function (d) {
                            return d3.format(',10d')(d);
                        }
                    },
                    yAxis1: {
                        ticks: 10,
                        tickFormat: function (d) {
                            return d3.format('10d')(d);
                        }
                    }
                }
            }; 

function generateData() {

                var data1 = [{ x: 0, y: 25 }, { x: 25, y: 25 }, { x: 25, y: 0 }];
                var data2 = [{ x: 0, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 0 }];
                var data3 = [{ x: 0, y: 75 }, { x: 75, y: 75 }, { x: 75, y: 0 }];
                var data4 = [{ x: 0, y: 100 }, { x: 100, y: 100 }, { x: 100, y: 0 }];
                var scatter = [{ x: 10, y: 30, size: Math.random(), shape: 'circle' }, { x: 20, y: 50, size: Math.random(), shape: 'circle' }, { x: 30, y: 80, size: Math.random(), shape: 'circle' }];

                var testdata = [];
                testdata.push({ key: 'Stream1', values: data1 });
                testdata.push({ key: 'Stream2', values: data2 });
                testdata.push({ key: 'Stream3', values: data3 });
                testdata.push({ key: 'Stream4', values: data4 });
                testdata.push({ key: 'Stream5', values: scatter });

                testdata[0].type = 'line';
                testdata[0].yAxis = 1;
                testdata[1].type = 'line';
                testdata[1].yAxis = 1;
                testdata[2].type = 'line';
                testdata[2].yAxis = 1;
                testdata[3].type = 'line';
                testdata[3].yAxis = 1;
                testdata[4].type = 'scatter';
                testdata[4].yAxis = 1;


                return testdata;
            }

Answer 1

我也遇到过这个问题，我的解决方法是添加一个仅包含起点和终点的虚拟散点图系列，系列颜色是透明的。

例如：系列：1,2,3,4,5 ... 100 分散1：5,67,83 虚拟散射：1,1

然后，散点图的x域将与线系列

一起缩放

angularjs nvd3 multichart与line和scatterplot无法正常工作

1 个答案: