jqplot：分离刻度和系列值答案

【问题标题】：jqplot: Separating ticks and series valuesjqplot：分离刻度和系列值
【发布时间】：2012-02-07 15:51:00
【问题描述】：

我有一个 Web 服务，它在一个数组中发送日期值（对于 x 轴）。它在另一个数组中发送 y 轴值。

是否可以让 jqPlot 创建一个包含 2 个这样的数组的图表。文档似乎表明这是可能的。

我知道将日期和系列值组合在一个数组中是可行的。想避免合并 2 个数组的额外处理。

这个 jsFiddle http://jsfiddle.net/abhivm/HmnmH/1/ 显示了示例代码。任何人都可以看看，让我知道如何做到这一点？

jsFiddle 今天早上返回错误，所以在下面发布 jQuery 代码。

$(document).ready(function() {
    var dateValues = ["01/15/2012", "01/17/2012", "01/18/2012", "01/19/2012"];
    var dailyValues = [219, 73, 73, 146];

    plot2 = $.jqplot('chart', [dailyValues], {

        axes: {
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                ticks: dateValues
            }
        }
    });
});

谢谢阿比

【问题讨论】：

同样的问题，我有 5 个系列，都具有相同的 x 轴日期，重复第一个系列 [date1, y1-val1] [date2, y1-val2] 似乎很可惜。 .. 然后对于第二个系列 [date1, y2-val1] [ date2, y2-val2]... 但是使用 ticks:dateValues 和 DateAxisRenderer 只会生成一个空白图表。有趣的是，y 轴刻度计算正确，x 轴显示正常。只是没有画线。

标签： jquery jqplot

【解决方案1】：

我想不出一种方法让 jqPlot 接受您希望如何定义输入（刻度选项似乎只适用于数字）。我很好奇“避免额外处理”的评论。使用 jQuery 就很简单了：

$.map(dateValues, 
       function(val,idx){
           return [[val,dailyValues[idx]]];
       }
);

将两个数组“合并”成点对。

【讨论】：

马克，同意 $.map 是一种快速合并的方法。我想避免编写更多的 Javascript 行，使其尽可能小。由于文档建议可以独立提供刻度和系列，因此我希望使用该捷径。 - 谢谢

【解决方案2】：

可以通过包含以下代码 sn-p 来解决日期轴的“同一日期的多个刻度”：

  xaxis: {
           label: "Whatever you name it",
           renderer: $.jqplot.DateAxisRenderer,
           min:dateVal[0],
           max:dateVal[dateVal.length-1],
           tickInterval: '1 day',

请在 xaxis: 下而不是在 tickOptions: 下包括 min、max 和 tickInterval。

在我的例子中，我在数组 dateVal 中有日期值，其中第 0 个元素是 x 轴日期的最小值，最后一个元素是最大日期值。如果您愿意，可以对日期值进行硬编码。

我希望这会有所帮助。

【讨论】：