具有多个系列的Highcharts列+线组合图

时间:2017-02-21 06:42:45

标签: javascript angularjs json highcharts spline

This is my multiple bar graph which i m getting

在我的图表中,我想为计数添加列图和折线图(趋势线)。我的代码就像这样

                     var crime_data=[];
                            for(var i=0;i<result.themes.length;i++){
                              var crime={};
                              var test2 = result.themes[i];
                              var test = test2[Object.keys(test2)];
                              console.log("test",test);
                              crime.name = Object.keys(result.themes[i]);
                              crime.data = [];
                                var test1 = test.individualValueVariable;
                                for(var j=0;j<test1.length;j++){
                               crime.data.push(test1[j].count);
                             };
                              crime_data.push(crime);
                            };
        var crimeChart = new Highcharts.Chart({
            chart: {
             renderTo: 'container1',
             type: 'colomn'
            },

            xAxis: {
                categories:year,
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Count'
                }
            },
                credits: {
                    enabled: false
            }, 
            tooltip: {

                shared: true,
            },
            plotOptions: {

                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    depth: 25,
                    allowPointSelect: true,
                    cursor: 'pointer',
                    point: {
                            },
  }
        },
            series:crime_data
        });

如果我在系列中添加'spline'类型。我没有得到数据而不是趋势线。请建议我在这种情况下如何添加趋势线。

这是我的JSON:

{
    "boundaries": {
        "boundary": [{
            "boundaryId": "45083021025",
            "boundaryType": "USA_POSTCODE",
            "boundaryRef": "B1"
        }]
    },
    "themes": [{
        "TheftCrimeTheme": {
            "boundaryRef": "B1",
            "individualValueVariable": [{
                "name": "2012 Theft Crime",
                "description": "Theft Crime for 2012",
                "count": 310
            }, {
                "name": "2013 Theft Crime",
                "description": "Theft Crime for 2013",
                "count": 230
            }]
        }
    }, {
        "AssaultCrimeTheme": {
            "boundaryRef": "B1",
            "individualValueVariable": [{
                "name": "2012 Assault Crime",
                "description": "Assault Crime for 2012",
                "count": 50
            }, {
                "name": "2013 Assault Crime",
                "description": "Assault Crime for 2013",
                "count": 41
            }]
        }
    }]
}

请建议我该怎么做。

1 个答案:

答案 0 :(得分:0)

Highcharts没有内置趋势线功能。您可以使用以下内容:https://github.com/virtualstaticvoid/highcharts_trendline 计算趋势线值并将其传递给新的线系列。