Jquery 复合迷你图答案

【问题标题】：Jquery composite sparklinesJquery 复合迷你图
【发布时间】：2012-05-13 07:30:29
【问题描述】：

我是迷你图的新手，需要一些帮助。我从 mysql 获取数据并用class=sparks 填充span 标记。该图已生成，但是当我创建另一个具有相同类但数据不同（复合线）的 span 标记时，我收到以下消息：

尝试将复合迷你图附加到没有现有迷你图的元素。

我的 JavaScript：

$(".sparks").sparkline( 'html', {
  composite:'true',
  type:'line',
  width:'900px',
  height:'400px',
  disableHiddenCheck:'true'
});

【问题讨论】：

标签： jquery composite sparklines

【解决方案1】：

第二个迷你图需要应用到 same 跨度标签，才能作为一个组合工作。

然后，Sparklines 将绘制到它在初始范围内创建的现有画布元素上。

【讨论】：

你能给我们举个例子吗？
@oki-erie-rinaldi 这是一个带有示例的 jsfiddle：jsfiddle.net/mattkibbler/c7kLhLko/3 如您所见，我保存了对应用 sparklines 的初始元素的引用，然后应用复合图表到相同的元素。

【解决方案2】：

尽量避免对班级进行选择。最好先画一个，然后在下一个上设置标志composite 等于true。并确保所有图纸都指向同一个 div。

按照这个说明，记得设置changeRangeMin和chartRangeMax 具有相同的值。

注意：您通常希望使用锁定两个图表上的轴 chartRangeMin 和 chartRangeMax 如果您希望每个值都相同图表占据同一点。

一个工作示例：https://jsfiddle.net/sLphjqoc/2/

【讨论】：

【解决方案3】：

我最近不得不创建一个复合线并使用以下代码：

下面Data的值为= [10,10,10,10,4,3,2,2,5,6,7,4,1,5,7,9,9,1,1,1 ]

HTML 和 JavaScript：

$('#btn_refresh_memory').click(function(){
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/getSampleData',
        dataType: 'json',
        aysync: true,
        success: function(data) {
            $('#sparkline_view').sparkline(data, 
                  {type: 'line', composite: true, fillColor: false, 
                   lineColor: 'green',
                   changeRangeMin: 0, chartRangeMax: 10,
                   lineWidth:3, lineColor: '#008080',
                   disableHiddenCheck:'true',
                   height: '75px', width: '350px', tooltipSuffix: 'Cycles'});
        }
    });
});

【讨论】：