Question

您好我使用GitHub master分支中的当前nvd3.js multichart。某些值组合导致我的图表在x轴下方绘制区域系列，导致系列在放大图表时模糊x轴标签。

放大时看起来像这样。

这个例子在这里https://github.com/mlawry/nvd3/blob/master/examples/multiChart4.html 只需放置文件＆＃34; multiChart4.html＆＃34;在＆＃34;示例＆＃34; nvd3 Git存储库的文件夹，并在任何Web浏览器中打开它。

有趣的是，这并不总是会发生，只有某些价值观才会发生。任何人都可以指出我正确的方向来解决这个问题吗？

Answer 1

原来问题很简单，区域系列的最小值（黄色）不为零（读取图表为7860）。由于 stackedArea.js 使用forceY到add 0 to the y values：

public void mSetUpMap() {
googleMap.clear();
/**Create dummy Markers List*/
List<Marker> markersList = new ArrayList<Marker>();
for (City item :  cityList)
{

if (googleMap !=null) {
 Marker m1 = googleMap.addMarker(new MarkerOptions().position(new 
   LatLng(item.getLatitude(), 
   item.getLongitude())).title(item.getName()).anchor(0.5f, 
   0.5f).icon(BitmapDescriptorFactory.fromBitmap(getCustomMarker(
   item.getDrawableId(), item.getName()))));
            markersList.add(m1);
        }

    }
    googleMap.setOnMarkerClickListener(new GoogleMap.OnMarkerClickListener() 
    {
        @Override
        public boolean onMarkerClick(final Marker marker) {
            ValueAnimator ani = ValueAnimator.ofFloat(0,1); //change for 
           (0,1) if you want a fade in
            ani.setDuration(2000);
            ani.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() 
              {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    marker.setAlpha((float) animation.getAnimatedValue());
                }

            });
            ani.start();
            if(marker.getTitle().equals(cityList.get(0).getName()))
            {
                AppUtil.city=cityList.get(0);

            }
            else if(marker.getTitle().equals(cityList.get(1).getName()))
            {
                AppUtil.city=cityList.get(1);

            }
            else if(marker.getTitle().equals(cityList.get(2).getName()))
            {
                AppUtil.city=cityList.get(2);

            }
            else if(marker.getTitle().equals(cityList.get(3).getName()))
            {
                AppUtil.city=cityList.get(3);

            }
            else if(marker.getTitle().equals(cityList.get(4).getName()))
            {
                AppUtil.city=cityList.get(4);

            }
            FragmentTransaction transaction = 
            getFragmentManager().beginTransaction();
            transaction.replace(R.id.frame_container, new 
            CityDetailFragment());
            transaction.commit();
            /*((CityDetailFragment) adapter.getItem(1)).setupData();
            viewPager.setCurrentItem(1,false);*/
            return true;
        }
     });

     /**create for loop for get the latLngbuilder from the marker list*/
        builder = new LatLngBounds.Builder();
    for (Marker m : markersList) {
        builder.include(m.getPosition());
    }
    /**initialize the padding for map boundary*/
    final int padding = 150;
    /**create the bounds from latlngBuilder to set into map camera*/
    final LatLngBounds bounds = builder.build();
    /**create the camera with bounds and padding to set into map*/
    cu = CameraUpdateFactory.newLatLngBounds(bounds, padding);
    /**call the map call back to know map is loaded or not*/
   enter code here


     googleMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback(){
        @Override
        public void onMapLoaded() {
            googleMap.moveCamera(CameraUpdateFactory.newLatLngBounds(bounds, 
            padding));
            googleMap.animateCamera(CameraUpdateFactory.zoomTo(12));
        }
    });
}

private Bitmap createStoreMarker() {
    ViewGroup continer = null;


    View markerLayout = view.inflate(null, 
    R.layout.store_marker_layout,continer);



    markerLayout.measure(View.MeasureSpec.makeMeasureSpec(0, 
    View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, 
    View.MeasureSpec.UNSPECIFIED));
    markerLayout.layout(0, 0, markerLayout.getMeasuredWidth(), 
    markerLayout.getMeasuredHeight());

    final Bitmap bitmap = 
     Bitmap.createBitmap(markerLayout.getMeasuredWidth(), 
    markerLayout.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    markerLayout.draw(canvas);
    return bitmap;
}

这意味着我们还必须在 multiChart.js 中设置// If the user has not specified forceY, make sure 0 is included in the domain // Otherwise, use user-specified values for forceY if (scatter.forceY().length == 0) { scatter.forceY().push(0); }时添加0（yScale2是应用于在右y轴上绘制的系列的比例）。目前没有这样做，所以事情不匹配，黄色系列被绘制在x轴下方，因为它试图从0开始绘制，这低于7860.

我的解决方法是使用yScale2在extraValue2BarStacked中添加0，see the new multiChart.js.当然，对yScale2也应该这样做。

yScale1

NVD3.js具有在x轴下方绘制的区域（stackedArea）系列的MultiChart模糊标签

1 个答案: