Jquery组合图表(Sparklines)

Question

我是新手，对sparklines不太了解，需要帮助。我从mysql获取数据，并使用class=sparks填充一个span标签。图表已生成，但当我创建另一个具有相同类别但不同数据的span标签（复合线）时，出现以下消息：

尝试将复合sparkline附加到没有现有sparkline的元素。

我的JavaScript代码：

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

- user1391915

Answer 1

第二个小图需要应用于同一个 span 标签，以便作为组合使用。

然后，Sparklines 将在创建的初始 span 元素内绘制现有的画布元素。

- mibbler

---

你能给我们举个例子吗？ - Oki Erie Rinaldi

@oki-erie-rinaldi 这是一个带有示例的jsfiddle：https://jsfiddle.net/mattkibbler/c7kLhLko/3正如你所看到的，我保存了对应用了sparklines的初始元素的引用，然后将复合图表应用到同一元素上。 - mibbler

Answer 2

尽量避免在类上进行选择。最好先绘制一个，然后在接下来的绘图中将标志composite设置为true。并确保所有绘图都指向同一个

。

遵循此注释，请记得设置changeRangeMin和chartRangeMax具有相同的值。

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

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

- blasrodri

Answer 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'});
        }
    });
});

- AvkashChauhan