首页 \ 问答 \ 过分拥挤的标签在饼图和条形图中是不可读的(Overcrowded labels are unreadable in piechart and barcharts)

过分拥挤的标签在饼图和条形图中是不可读的(Overcrowded labels are unreadable in piechart and barcharts)

对于PieCharts,通常有几个“切片”只包含很小一部分数据(例如<2%),结果是标签相互重叠并且不可读,显示如下。 有谁知道这个解决方案? 我看到一些图表显示了饼图之外的标签,并指向了相应的部分,但我不确定ios图表是否有类似的可能。

在这里输入图像描述

对于条形图也会出现类似的问题,其中所有值彼此重叠并且变得不可读,如下所示。 我能想到的解决方案是仅显示一部分条形图,并在用户平移时显示其他条形图。

在这里输入图像描述

如果有人处理了这两个问题,我会很高兴看到你如何解决问题,或者如果最好使用不同的库。 我在下面发布了一些代码,但不知道它是否会有帮助,因为这可能不是真正的实现错误。

条形图

    //...init view...
    _chartView.delegate = self;
    _chartView.descriptionText = @"";
    _chartView.noDataTextDescription = @"No data";
    _chartView.drawHighlightArrowEnabled = true;
    _chartView.drawValueAboveBarEnabled = YES;
    _chartView.drawMarkers = true;
    _chartView.dragEnabled = true;


    ChartXAxis *xAxis = _chartView.xAxis;
    xAxis.labelPosition = XAxisLabelPositionBottom;
    xAxis.labelFont = [UIFont systemFontOfSize:10.f];
    xAxis.drawGridLinesEnabled = NO;
    xAxis.spaceBetweenLabels = 2.0;

    ChartYAxis *rightAxis = _chartView.rightAxis;
    rightAxis.enabled = NO;

    NSMutableArray *yVals = [[NSMutableArray alloc] init];
    NSMutableArray *xVals = [[NSMutableArray alloc] init];

    //populate xVals and yVals with data..

    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithYVals:yVals label:@"Occurences"];
    set1.colors = ChartColorTemplates.vordiplom;
    set1.drawValuesEnabled = YES;

    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];
    BarChartData *bdata = [[BarChartData alloc] initWithXVals:xVals dataSets:dataSets];
    [bdata setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]];

    _chartView.data = bdata;

    [self.view addSubview:_chartView];

饼形图

// init饼图.. _pieChart.delegate = self;

_pieChart.usePercentValuesEnabled = YES;
_pieChart.descriptionText = @"";
_pieChart.drawCenterTextEnabled = YES;

NSMutableArray *yVals = [[NSMutableArray alloc] init];
NSMutableArray *xVals = [[NSMutableArray alloc] init];

//...populate xVals and yVals with data 

PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithYVals:yVals label:@"Locations"];
dataSet.sliceSpace = 2.0;

dataSet.colors = ChartColorTemplates.joyful;
PieChartData *data1 = [[PieChartData alloc] initWithXVals:xVals dataSet:dataSet];
NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];
pFormatter.numberStyle = NSNumberFormatterPercentStyle;
pFormatter.maximumFractionDigits = 1;
pFormatter.multiplier = @1.f;
pFormatter.percentSymbol = @" %";
[data1 setValueFormatter:pFormatter];
_pieChart.data = data1;
[self.view addSubview:_pieChart];

For PieCharts, there are often several "slices" with a very small portion of the data (< 2%, for example), and as a result, the labels overlap each other and are unreadable, displayed below. Does anyone know solutions to this? I've seen some charts that show the label outside the pie and point to the respective piece, but I'm not sure if something similar is possible for ios-charts.

enter image description here

A similar issue occurs for bar charts, in which all the values overlap with each other and become unreadable, shown below. The solution I can think of, would be to show only a subset of the bars, and show the other bars if the user pans.

enter image description here

If anyone has dealt with either issue, I'd appreciate seeing how you solved it, or if it's better to use a different library. I posted some code below, but not sure if it''ll help, since this presumably isn't really an implementation bug.

Bar Chart

    //...init view...
    _chartView.delegate = self;
    _chartView.descriptionText = @"";
    _chartView.noDataTextDescription = @"No data";
    _chartView.drawHighlightArrowEnabled = true;
    _chartView.drawValueAboveBarEnabled = YES;
    _chartView.drawMarkers = true;
    _chartView.dragEnabled = true;


    ChartXAxis *xAxis = _chartView.xAxis;
    xAxis.labelPosition = XAxisLabelPositionBottom;
    xAxis.labelFont = [UIFont systemFontOfSize:10.f];
    xAxis.drawGridLinesEnabled = NO;
    xAxis.spaceBetweenLabels = 2.0;

    ChartYAxis *rightAxis = _chartView.rightAxis;
    rightAxis.enabled = NO;

    NSMutableArray *yVals = [[NSMutableArray alloc] init];
    NSMutableArray *xVals = [[NSMutableArray alloc] init];

    //populate xVals and yVals with data..

    BarChartDataSet *set1 = [[BarChartDataSet alloc] initWithYVals:yVals label:@"Occurences"];
    set1.colors = ChartColorTemplates.vordiplom;
    set1.drawValuesEnabled = YES;

    NSMutableArray *dataSets = [[NSMutableArray alloc] init];
    [dataSets addObject:set1];
    BarChartData *bdata = [[BarChartData alloc] initWithXVals:xVals dataSets:dataSets];
    [bdata setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:10.f]];

    _chartView.data = bdata;

    [self.view addSubview:_chartView];

Pie Chart

//init pie chart.. _pieChart.delegate = self;

_pieChart.usePercentValuesEnabled = YES;
_pieChart.descriptionText = @"";
_pieChart.drawCenterTextEnabled = YES;

NSMutableArray *yVals = [[NSMutableArray alloc] init];
NSMutableArray *xVals = [[NSMutableArray alloc] init];

//...populate xVals and yVals with data 

PieChartDataSet *dataSet = [[PieChartDataSet alloc] initWithYVals:yVals label:@"Locations"];
dataSet.sliceSpace = 2.0;

dataSet.colors = ChartColorTemplates.joyful;
PieChartData *data1 = [[PieChartData alloc] initWithXVals:xVals dataSet:dataSet];
NSNumberFormatter *pFormatter = [[NSNumberFormatter alloc] init];
pFormatter.numberStyle = NSNumberFormatterPercentStyle;
pFormatter.maximumFractionDigits = 1;
pFormatter.multiplier = @1.f;
pFormatter.percentSymbol = @" %";
[data1 setValueFormatter:pFormatter];
_pieChart.data = data1;
[self.view addSubview:_pieChart];

原文:https://stackoverflow.com/questions/34881917
更新时间:2023-06-16 15:06

最满意答案

您将jQuery的DOM准备好的值加载并且再也不加载它。

您需要测试当前值,而不是DOM准备就绪时的值,大致如下:

$("#email_address").on("keypress", function() {
    if(email.test($(this).val())) {
        $("#email_address").parent().addClass("has-success");
    }
});

无关紧要,但个人而言,我会在一个函数中包装电子邮件测试,而不是说email.test(xxx)您可以更自然地阅读它,比如validEmail(xxx)等。


You load the value on jQuery's DOM ready and never load it again.

You need to test the current value, not the one that's there when the DOM is ready, roughly:

$("#email_address").on("keypress", function() {
    if(email.test($(this).val())) {
        $("#email_address").parent().addClass("has-success");
    }
});

Unrelated, but personally I'd wrap up the email test in a function so instead of saying email.test(xxx) you could read it more naturally like validEmail(xxx) etc.

相关问答

更多
  • 您可以使用email类型作为输入,并使用按钮submit谁来触发验证输入。 我添加了一个函数来检查电子邮件是否对正则表达式有效。 (在这里找到: 如何在JavaScript中验证电子邮件地址? )您必须添加jQuery验证插件 $(document).ready(function(){ $('#survey input').on('keyup', function(){ var validator = $("#survey").validate(); if (validator. ...
  • 我通常使用这个javascript函数来验证前端: function validateEmail(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ return email.match(re) } 它 ...
  • 您不需要自定义扩展。 你可以使用accept()方法: http : //docs.jquery.com/Plugins/Validation/Methods/accept#extension // input field // validation rule eduEmail2: { required: true, email: true, ...
  • 那么,我已经找到了一个解决方案,它的工作正常。 我们可以在调用PowerReview的api时添加一个电子邮件参数,如下所示: POWERREVIEWS.display.render({ merchant_user_email : 'youremailaddress.com' //Your other params come here }); 以上将提供无电子邮件地址字段的权力审查表,所以你不需要输入电子邮件地址并验证它。 我希望这可以帮助其他人,因为没有好的文档可用。 Well, I h ...
  • 您将jQuery的DOM准备好的值加载并且再也不加载它。 您需要测试当前值,而不是DOM准备就绪时的值,大致如下: $("#email_address").on("keypress", function() { if(email.test($(this).val())) { $("#email_address").parent().addClass("has-success"); } }); 无关紧要,但个人而言,我会在一个函数中包装电子邮件测试,而不是说email.tes ...
  • 您遇到的麻烦是因为您用来获取输入字段的jQuery选择器正在扫描整个页面。 他们应该只搜索相对于触发验证的表单的输入。 您可以获得最接近验证点击上下文的表单。 请注意更改: 获取表格: var form = $(this).closest("form"); 在表单中搜索输入字段: form.find('input').each(function() { 仅清除特定表单中的错误消息: form.find('.error-message[data-input-name="' + inputName + '" ...
  • jQuery Validate的文档说明了这一点 服务器端资源通过jQuery.ajax(XMLHttpRequest)调用,并获取与已验证元素的名称对应的键/值对及其作为GET参数的值。 服务器端响应必须是JSON字符串,对于有效元素必须为“true”,对于无效元素,可以为“false”,undefined或null 您正在检查$_POST['CusEadd'] ,并假设您有一个具有该名称的元素,您仍然必须指定POST作为方法 CusEadd: { required:true, ema ...
  • 您执行ajax请求,默认情况下是异步的,这意味着它在执行其余功能之前不会等待请求的响应。 因此,在您的情况下,一旦发出请求,它将返回true ,如函数结束所述。 然后,当您的ajax请求的响应返回时,它将触发您的success函数,该函数将显示错误消息。 您可以使用$.ajax函数的async参数执行类似操作,以确保在继续执行之前它将等待您的请求的响应。 function validateForm() { var firstName = $('#txtFirstName').val(); v ...
  • 首先,请确保您在服务器端进行所有验证。 我喜欢让我的表单在没有任何JavaScript的情况下工作。 我假设你已经做了那么多。 ****原始答案*** 然后,将您的“提交”元素更改为一个按钮元素。 在按钮元素的OnClick上,运行验证的JavaScript函数。 如你所知,很多样品都是如此做的。 如果验证失败,请发送警报。 如果成功,请使用JavaScript提交表单。 ****新,工具使用答案*** 您也可以使用JQuery(orip指出),它是插件来执行此操作。 他们处理很多艰苦的工作。 请确保我的评 ...
  • 在显示之前退出该功能。 $('#fes-form').submit(function () { return !$("#fes-submit").is(':disabled') <---exits function $("#notification-container").show("slide"); <-- will never be called }); 你有一个更大的问题。 在每次更改时,您都会将提交处理程序绑定到表单。 那很不好。 获取change事件的提交处理程序OUT ...

相关文章

更多

最新问答

更多
  • 使用通配符获取更多servlet请求变量[重复](Get more servlet request variables using wildcards [duplicate])
  • 返回相同的集合类型,参数化不同(Returning same collection type, differently parameterised)
  • C ++朋友函数模板重载和SFINAE在clang ++,g ++,vc ++中的不同行为(C ++ 14模式)(C++ friend function template overloading and SFINAE different behaviors in clang++, g++, vc++ (C++14 mode))
  • 与paure IoT-Hub的Python paho-MQTT连接(Python paho-MQTT connection with azure IoT-Hub)
  • 编译器警告“来自不同的Objective-C类型的赋值”(Compiler warning “assignment from distinct objective-c type”)
  • C ++编译错误(在此函数中未初始化)[重复](C++ Compile Error (uninitialized in this function) [duplicate])
  • unsigned-signed下溢机制(unsigned-signed underflow mechanism)
  • 快速行查询的数据结构?(Data structure for fast line queries?)
  • 饥荒有手机安卓版的吗
  • Jquery可拖动碰撞检测错误(Jquery draggable collision detection bug)
  • sql调优是怎样来实现的?
  • 无法使占位符输入文本消失(Unable to make the placeholder input text disappear)
  • jQuery改变了两个div的CSS属性(JQuery change CSS property of two div's)
  • JDK中包含的库版本(Versions of libraries included in the JDK)
  • 请问下载的是出现ASP是什么意思
  • Firebase MLkit用于数字液晶显示器的文本识别(Firebase MLkit Text recognition for digital lcd displays)
  • 我可以在任何平台上运行C和C ++吗?(Can I run C and C++ on any platform?)
  • 让小组在C#的特定位置(get panel at specific positions in C#)
  • Nagios为通知设置了更高的间隔(Nagios set higher interval for notifications)
  • 无法向SMTP主机发送电子邮件(unable to send an email to SMTP host)
  • 获取MVC 4使用的DisplayMode后缀(Get the DisplayMode Suffix being used by MVC 4)
  • 如何在.NET代码中验证全球邮政编码(How can I validate worldwide postal codes in my .NET code)
  • 如何通过引用返回对象?(How is returning an object by reference possible?)
  • Clojure:减少大型懒惰收集会占用内存(Clojure: Reducing large lazy collection eats up memory)
  • 矩阵如何存储在内存中?(How are matrices stored in memory?)
  • 每个请求的Java新会话?(Java New Session For Each Request?)
  • 显示作为字符串的SVG(Showing an SVG that I have as a string)
  • 从jansson库里创建json请求的自由内存的正确方式是什么?(what is the proper way of free memory in creating json request from jansson libary?)
  • jQuery插件无法正常工作 - 它是附加的(jQuery plugin not working - it's appended)
  • 使用stat_summary自动调整ylim(Automatically adjusting ylim with stat_summary)