Question

我想做什么：我想使用Highcharts和最佳代码样式显示图表。

问题：我的代码无法读取/难以调试，因为我将其存储在变量中。

好的，我有一个Javascript-Object包含我以后需要的所有信息（类别，y轴值和系列本身，分为正数，中性和负数）。

var testDia = 
{
    name : 'Testname',
    'chartCategories': ['Golf', 'Polo', 'Passat'],
    'chartSeries': 
    {
        'positive': [
                {y:341, url:'http://golf.com?q=positive'},
                {y:487, url:'http://polo.com?q=positive'},
                {y:180, url:'http://passat.com?q=positive'}
        ],
        'neutral': [
                {y:12, url:'http://golf.com?q=neutral'},
                {y:3, url:'http://polo.com?q=neutral'},
                {y:9, url:'http://passat.com?q=neutral'}
        ],
        'negative': [
                {y:222, url:'http://golf.com?q=negative'},
                {y:115, url:'http://polo.com?q=negative'},
                {y:321, url:'http://passat.com?q=negative'}
        ]
    }
}

我的方法是循环使用类别，并将正，中性和负数添加到单独的字符串中，稍后我将在highcharts-setup中进行评估。

var allPositiveData = '';
var allNeutralData = '';
var allNegativeData = '';

for(var i=0; i < categories.length; i++) {

    var diaPositive = series['positive'][i]['y'];
    var diaNeutral = series['neutral'][i]['y'];
    var diaNegative = series['negative'][i]['y'];

    urlPositive = series['positive'][i]['url'];
    urlNeutral = series['neutral'][i]['url'];
    urlNegative = series['negative'][i]['url'];

    allPositiveData += "{'y': " + diaPositive + ", 'url': '" + urlPositive + "'}, ";
    allNeutralData += "{'y': " + diaNeutral + ", 'url': '" + urlNeutral + "'}, ";
    allNegativeData += "{'y': " + diaNegative + ", 'url': '" + urlNegative + "'}, ";        

} // end of loop

allPositiveData = eval( "[" + allPositiveData.slice(0, -2) + "]" );
allNeutralData = eval( "[" + allNeutralData.slice(0, -2) + "]" );
allNegativeData = eval( "[" + allNegativeData.slice(0, -2) + "]" );

Highcharts-设置

newChart = new Highcharts.Chart({
    chart : {
        renderTo : 'container',
        type: 'column'
    },

    [...] // skipping the rest of the setup

    series: [
    {
        name: 'Positive',
        data: allPositiveData
    }, {
        name: 'Neutral',
        data: allNeutralData
    }, {
        name: 'Negative',
        data: allNegativeData
    }]
});

我认为有几种方法可以实现我想要的但我想知道更好的（可能是面向对象的）解决方案。

http://jsfiddle.net/x8455/

Answer 1

这是你应该怎么做的。

var allPositiveData = []; // You want an array, so start off with an array.

for(var i=0; i < categories.length; i++) {
    var diaPositive = series['positive'][i]['y'];
    urlPositive = series['positive'][i]['url'];
    allPositiveData.push({'y':diaPositive, 'url':urlPositive}); // Add the element to the array.
}

这就是它的全部。您的Highcharts设置代码可以保持不变。

为了使样本更短，我只编辑了positive数据的代码，其余的是相同的，只是一个不同的名称。

Answer 2

我认为你正在努力做一些你已经做过的事情。

你想从你的JSON中为各个类别显示三个系列，然后让我们来看看：

您的代码：

var categories = testDia['chartCategories'];
var series = testDia['chartSeries'];

大！现在使用那些变量：

newChart = new Highcharts.Chart({
    chart : {
        renderTo : portletContainer,
        type: 'column'
    },
    ...
    xAxis: {
        categories: categories,
        labels: {
            rotation: -45,
            align: 'right',
        }
    },
    ...
    series: [{
        name: 'Positive',
        data: series.positive // testDia.chartSeries.positive is the same
    }, {
        name: 'Neutral',
        data: series.neutral
    }, {
        name: 'Negative',
        data: series.negative
    }]
});

工作演示：http://jsfiddle.net/x8455/1/

JSON-Object as string：使用concat（），eval（）和/或JSON.parse（）？

2 个答案: