Javascript 将HighChart饼图创建为迷你型元素

我需要用动态的、最小的饼图填充数据表，有点像使用HighCharts的迷你图

我很快就要解决这个问题了，但是通过数据火花线

参数传递数据数组却让我难以捉摸

<td data-sparkline="[{name: 'KARE', y: 17.33, sliced: true, selected: true}, {name: 'KSTP', y: 14.03}, {name: 'WCCO', y: 10.38}, {name: 'KMSP', y: 3.2}]  ; pie"/>

这是我到目前为止所拥有的

如果我硬编码fiddle第74行函数中的图表数据，图表将初始化并工作，但我需要该函数读取表中的数组

 for (i = 0; i < len; i += 1) {
    $td = $($tds[i]);
    stringdata = $td.data('sparkline');
    arr = stringdata.split('; ');
    data = arr[0];
    chart = {};
            console.log(data);
    if (arr[1]) {
        chart.type = arr[1];
    }
    $td.highcharts('SparkLine', {
        series: [{
            data: [{name: 'KARE', y: 17.33, sliced: true, selected: true}, {name: 'KSTP', y: 14.03}, {name: 'WCCO', y: 10.38}, {name: 'KMSP', y: 3.2}],
            pointStart: 1
        }],

（i=0；i{ $td=$（$tds[i]）； stringdata=$td.data（'sparkline'）； arr=stringdata.split（“；”）； 数据=arr[0]； 图表={}； 控制台日志（数据）； if（arr[1]）{ chart.type=arr[1]； } $td.高图表（‘迷你图’{ 系列：[{ 数据：[{name:'KARE'，y:17.33，sliced:true，selected:true}，{name:'KSTP'，y:14.03}，{name:'WCCO'，y:10.38}，{name:'KMSP'，y:3.2}]， 起点：1 }],

但是，如果我在

中循环并读取数据sparkline参数中的字符串，它会在控制台中记录正确的字符串，但不会绘制饼图

for (i = 0; i < len; i += 1) {
    $td = $($tds[i]);
    stringdata = $td.data('sparkline');
    arr = stringdata.split('; ');
    data = arr[0];
    chart = {};
            console.log(data);
    if (arr[1]) {
        chart.type = arr[1];
    }
    $td.highcharts('SparkLine', {
        series: [{
            data: data,
            pointStart: 1
        }],

（i=0；i{ $td=$（$tds[i]）； stringdata=$td.data（'sparkline'）； arr=stringdata.split（“；”）； 数据=arr[0]； 图表={}； 控制台日志（数据）； if（arr[1]）{ chart.type=arr[1]； } $td.高图表（‘迷你图’{ 系列：[{ 数据：数据， 起点：1 }],

---

因为在第二种情况下，数据只是一个字符串，所以您需要做一些事情，比如对格式良好的对象属性求值

/**
*为闪图创建一个构造函数，该构造函数采用一些合理的默认值并合并到单个
*图表选项。这个函数也可以从jQuery插件中以$（element.highcharts（'SparkLine'）的形式获得。
*/
Highcharts.SparkLine=函数（a、b、c）{
var hasRenderToArg=typeof a==“string”| | a.nodeName，
选项=参数[HasRenderArg？1:0]，
默认选项={
图表：{
renderTo:（options.chart&&options.chart.renderTo）| |这个，
背景颜色：空，
边框宽度：0，
类型：'区域'，
保证金：[2,0,2,0]，
宽度：160，
身高：160，
风格：{
溢出：“可见”
},
//小型优化，每种火花节省1-2毫秒
斯基普克隆：是的
},
标题：{
文本：“”
},
学分：{
已启用：false
},
图例：{
已启用：false
},
};
options=Highcharts.merge（默认选项，选项）；
返回hasRenderToArg？
新高度图表。图表（a，选项，c）：
新高度图表。图表（选项b）；
};
var start=+新日期（），
$tds=$（'td[数据火花]），
fullLen=$tds.length，
n=0；
//在现代浏览器中，创建153个迷你图表的速度相当快，但IE8和mobile
//可能需要几秒钟的时间，因此我们将输入分成块，并在超时时应用它们
//以避免锁定浏览器进程并允许交互。
函数doChunk（）{
变量时间=+新日期（），
我
len=$tds.length，
$td，
stringdata，
啊,，
标签，
数据，
图表；
对于（i=0；i”，
pointFormat:“{point.y}%”
},
图表：图表
});
n+=1；
//如果该过程花费的时间太长，请运行超时以允许与浏览器交互
如果（新日期（）-时间>500）{
$tds.拼接（0，i+1）；
setTimeout（doChunk，0）；
打破
}
}
}
doChunk（）；

#结果{
文本对齐：右对齐；
颜色：灰色；
最小高度：2米；
}
#桌上小苏打{
保证金：0自动；
边界塌陷：塌陷；
}
th{
字体大小：粗体；
文本对齐：左对齐；
}
td，th{
填充物：5px；
边框底部：1px纯银；
高度：160px；
}
thead th{
边框顶部：2倍纯色灰色；
边框底部：2倍纯色灰色；
}
.highcharts工具提示>范围{
背景：白色；
边框：1px纯银；
边界半径：3px；
盒影：1px 1px 2px#888；
填充：8px；
}

陈述
收入
季度收入
成本
每季度成本
结果
每季度成绩
阿拉巴马州
254
阿拉斯加州
246

当您从

数据火花线

属性读取数据时，它只是一个字符串，但Highcharts

系列

需要一个数组

因此，您需要将字符串解析为JavaScript数组。这通常是通过

JSON.parse（）

完成的，但是

data sparkline

中的数据不正确