jqplot 和堆积图表数据标签

发布于 2024-12-12 02:15:12 字数 1258 浏览 0 评论 0原文

我在 jqplot 和在堆积图表上定位数据标签时遇到问题。

我正在每列绘制三个数据值的图表。问题是当其中一个数据值非常小(例如 1%)时,数据标签与相邻数据值的标签重叠。

我在这里上传了一张图片: http://img84.imageshack.us/img84/1305/capturell.jpg

我想做的是将数据标签放置在每个条形的中间。这可能吗?

这是我正在使用的代码:

 plot1 = $.jqplot(id, data, {
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
         fillToZero: true,
          highlightMouseOver: false,
        highlightMouseDown: false,
        highlightColor: null,
        barDirection: 'horizontal'
      },
         pointLabels: { show: true, location: 'e', edgeTolerance: -15 }
    },
    title:{text: title,fontSize: 16},

    series:[
      {label: data_labels[0] },
      {label: data_labels[1]}

    ],
    seriesColors: [  "#4879a6", "#d9321d"], 

                // Rotate the bar shadow as if bar is lit from top right.
    shadowAngle: 135,

    axes: {
      xaxis: {
        min: 0,
        max: 100,
        tickInterval: 20,
        tickOptions: {formatString: '%d\%' ,fontSize: 14}
      },
      yaxis: {
         renderer: $.jqplot.CategoryAxisRenderer,
         ticks: ticks,
         tickOptions: {fontSize: 14}
      }
    }

I am having a problem with jqplot and positioning the data labels on stacked charts.

I am charting three data values per column. The problem is when one of the data values is very small like 1% the data label overlaps that of the adjacent data value.

I have uploaded an image here:
http://img84.imageshack.us/img84/1305/capturell.jpg

What I would like to do is be able to position the data labels in the middle of each bar. Is this possible?

Here is the code I am using:

 plot1 = $.jqplot(id, data, {
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
         fillToZero: true,
          highlightMouseOver: false,
        highlightMouseDown: false,
        highlightColor: null,
        barDirection: 'horizontal'
      },
         pointLabels: { show: true, location: 'e', edgeTolerance: -15 }
    },
    title:{text: title,fontSize: 16},

    series:[
      {label: data_labels[0] },
      {label: data_labels[1]}

    ],
    seriesColors: [  "#4879a6", "#d9321d"], 

                // Rotate the bar shadow as if bar is lit from top right.
    shadowAngle: 135,

    axes: {
      xaxis: {
        min: 0,
        max: 100,
        tickInterval: 20,
        tickOptions: {formatString: '%d\%' ,fontSize: 14}
      },
      yaxis: {
         renderer: $.jqplot.CategoryAxisRenderer,
         ticks: ticks,
         tickOptions: {fontSize: 14}
      }
    }

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

暗藏城府 2024-12-19 02:15:12

请记住,seriesDefaults 只是将相同的值传递给尚未定义的系列的每个实例。所以...

 seriesDefaults:{pointLabels: {show: true, stackedValue: false, location:'s'}}, 

相同

 series:[
             {pointLabels: {show: true, stackedValue: false, location:'s'}},           
             {pointLabels: {show: true, stackedValue: false, location:'s'}},
             {pointLabels: {show: true, stackedValue: false, location:'s'}}            
             ]  

与他在 jqplots 网站上展示的示例 。
http://www.jqplot.com/deploy/dist/examples/point -labels.html

显示了一个名为 y-padding 的值,该值被传递给 pointLabels,这应该可以解决问题。该示例演示了如何在传递给 jqplot 的数据数组中传递自定义点值标记。如果您可以在侧面添加一些 html 来设置数据标记的样式,我不会感到震惊。

 var data = [[x,y,tooltipValue],[x,y,null]];    

希望这会有所帮助,或者至少为您指明正确的方向。

Remember that seriesDefaults just passes the same value to every instance of a series where its not already defined. so...

 seriesDefaults:{pointLabels: {show: true, stackedValue: false, location:'s'}}, 

is the same as

 series:[
             {pointLabels: {show: true, stackedValue: false, location:'s'}},           
             {pointLabels: {show: true, stackedValue: false, location:'s'}},
             {pointLabels: {show: true, stackedValue: false, location:'s'}}            
             ]  

on the jqplots site he shows this example.
http://www.jqplot.com/deploy/dist/examples/point-labels.html

that shows a value called y-padding that is passed to pointLabels, that should do the trick. That same example shows how to pass custom point value markers within the data array being passed to jqplot. It wouldn't shock me if you could slip it some html on the side to style the data markers.

 var data = [[x,y,tooltipValue],[x,y,null]];    

Hope this helps, or at least gets you pointed in the right direction.

和我恋爱吧 2024-12-19 02:15:12

试试这个 dataLabelPositionFactor 属性

try this dataLabelPositionFactor proprety

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文