在 jqPlot 中用等值表示多个数据点

Question

我使用 jqPlot 在散点图中显示数据集。数据集中有重复值。有没有一种方法可以表示图表上的一个位置有多个数据点？也许通过增加点标记更大？或者，我应该使用另一种图表吗？

这是我的 Javascript 散点图代码。

var qr=[[1,5],[4,5],[6,5],[4,5],[0,5],[4,5],[6,5],[4,5]];
var gr_html = $.jqplot('par_sca_div', [qr], {  
                seriesDefaults:{
                  showLine:false,
                  markerRenderer: $.jqplot.MarkerRenderer,
                    markerOptions: {
                      size: 5
                    }
                },
                series:[{ 
                  markerOptions: {
                    style: 'circle',
                    size:5,
                  },
                }],
                axes:{
                  xaxis:{
                    label:'Score',
                  },
                  yaxis:{
                    renderer:$.jqplot.canvasTextRenderer,
                    label:'Rate',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    labelOptions:{
                      fontSize: '10pt'
                    },
                  },
                }
      });

Answer 1

使用 pointLabels plugin 并让您的标签反映相同点数。

将标签添加到您的数组：

var qr=[[1,5, null],[4,2, null],[6,5,'2'],[4,5,'3'],[0,5,null],[4,5,'3'],[6,5,'2'],[4,5,'3']];

并在您的系列中启用点标签：

series:[{
   pointLabels:{
   show: true,
},

这里是一个有效的 jsfiddle 示例。

关于将标签动态添加到原始数组的算法，您可以迭代原始数组并创建一个表示点和重复次数的矩阵。

例如：

[4,5] 将表示为 pointMatrix[4][5]，值为 3。

然后再次迭代数组并使用矩阵将相应的点标签值添加到原始数组。

在 jqPlot 中用等值表示多个数据点

Representing multiple data points with equal value in jqPlot

javascript

jqplot

scatter-plot