Fatal编程技术网
  • highcharts/
  • Highcharts在一个div中附加两种类型的图表

Highcharts在一个div中附加两种类型的图表

highcharts

Highcharts在一个div中附加两种类型的图表,highcharts,Highcharts,我使用下面的代码创建图表。两个分区都可以，但我希望这两种类型的图表在一个分区中，当我使用相同的数据时，尽管我在这里使用了不同的数据。。。。代码是 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Csv Chart</title> <script src="js

我使用下面的代码创建图表。两个分区都可以，但我希望这两种类型的图表在一个分区中，当我使用相同的数据时，尽管我在这里使用了不同的数据。。。。代码是

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Csv Chart</title>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/highcharts-more.js" type="text/javascript"></script>
<script src="js/modules/exporting.js" type="text/javascript"></script>
</head>
<body>
<script>
var csvChart;
var chartArea;
$(document).ready(function(){
    var options = {
    chart: {
        renderTo: 'csv-chart',
        type: 'line'
    },
    title: {
        text: 'Fruit Consumption Line Chart'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Units'
        }
    },
    series: []
  };
  $.get('data.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');
    console.log(data);

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        // header line containes categories
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                if (itemNo > 0) options.xAxis.categories.push(item);
            });
        }

        // the rest of the lines contain data with their name in the first position
        else {
            var series = {
                data: []
            };
            $.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                    series.name = item;
                } else {
                    series.data.push(parseFloat(item));
                }
            });

            options.series.push(series);

        }

    });

    // Create the chart
    csvChart = new Highcharts.Chart(options);
});

chartArea = new Highcharts.Chart({

            chart: {
                renderTo: 'area-chart',
                type: 'arearange'
            },

            title: {
                text: 'Temperature variation by day'
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {
                title: {
                    text: null
                }
            },

            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: '°C'
            },

            legend: {
                enabled: false
            },

            series: [{
                name: 'Temperatures',
                data: [
/* 2009-01-01 */
[1230771600000, -5.8, 0.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1231549200000, 3.1, 6.8],
[1231635600000, 0.0, 7.6],
[1231722000000, 5.6, 9.4],
[1231808400000, 3.6, 6.5],
[1231894800000, -3.6, 3.8],
[1231981200000, -6.0, -1.5],
[1232067600000, -3.8, 2.4],
[1232154000000, 1.5, 4.2],
[1232240400000, 0.0, 4.5],
[1232326800000, -1.1, 3.6],
[1232413200000, 0.5, 5.1],
[1232499600000, 0.0, 2.5],
[1232586000000, -0.6, 2.1],
[1232672400000, 0.8, 4.7],
[1232758800000, 0.6, 4.4],
[1232845200000, -3.9, 1.4],
[1232931600000, -4.3, 2.0],
[1233018000000, -6.1, -0.4],
[1233104400000, -0.3, 1.9],
[1233190800000, -2.9, 2.7],
[1233277200000, -4.0, -1.0],
[1233363600000, -4.4, -1.9],
/* 2009-12-01 */
[1259629200000, -3.3, 1.7],
[1259715600000, -2.8, -0.7],
[1259802000000, -2.7, 3.8],
[1259888400000, -0.7, 4.2],
[1259974800000, 0.3, 6.1],
[1260061200000, 2.9, 9.8],
[1260147600000, 0.0, 6.8],
[1260234000000, 0.6, 2.8],
[1260320400000, 0.1, 5.1],
[1260406800000, 2.8, 3.9],
[1260493200000, -1.2, 2.2],
[1260579600000, -4.0, -0.4],
[1260666000000, -0.7, 0.7],
[1260752400000, 0.5, 1.6],
[1260838800000, -1.0, 1.5],
[1260925200000, -7.8, -1.0],
[1261011600000, -11.9, -7.9],
[1261098000000, -13.5, -7.9],
[1261184400000, -7.8, -1.7],
[1261270800000, -11.2, -0.6],
[1261357200000, -13.1, -7.2],
[1261443600000, -13.2, -5.2],
[1261530000000, -10.9, -7.7],
[1261616400000, -8.4, -1.5],
[1261702800000, -6.1, -1.2],
[1261789200000, -2.6, -1.2],
[1261875600000, -2.9, 0.7],
[1261962000000, -2.7, 0.7],
[1262048400000, -10.8, -1.3],
[1262134800000, -11.1, -8.0],
[1262221200000, -12.2, -6.5]
]
            }]

        });
});

</script>
<div id="csv-chart"></div>
<div id="area-chart"></div>
</body>
</html>


Csv图表
var-csvChart；
var Chart区域；
$（文档）.ready（函数（）{
变量选项={
图表：{
renderTo:“csv图表”，
类型：“行”
},
标题：{
正文：“水果消费折线图”
},
xAxis：{
类别：[]
},
亚克斯：{
标题：{
文本：“单位”
}
},
系列：[]
};
$.get（'data.csv'，函数（数据）{
//分道扬镳
变量行=data.split（'\n'）；
控制台日志（数据）；
//迭代行并添加类别或系列
$.each（行，函数）（行号，行）{
var items=line.split（'，'）；
//标题行包含类别
如果（行号==0）{
$。每个（项目，功能（项目编号，项目）{
if（itemNo>0）options.xAxis.categories.push（项目）；
});
}
//其余行包含名称位于第一个位置的数据
否则{
变量系列={
数据：[]
};
$。每个（项目，功能（项目编号，项目）{
如果（itemNo==0）{
series.name=项目；
}否则{
数据推送（parseFloat（item））；
}
});
选项。系列。推送（系列）；
}
});
//创建图表
csvChart=新的Highcharts.图表（选项）；
});
chartArea=新高度图表。图表({
图表：{
renderTo:“面积图”，
类型：“区域范围”
},
标题：{
文字：“白天的温度变化”
},
xAxis：{
键入：“日期时间”
},
亚克斯：{
标题：{
文本：空
}
},
工具提示：{
十字准星：没错，
分享：是的，
valueSuffix:“°C”
},
图例：{
已启用：false
},
系列：[{
名称：“温度”，
数据：[
/* 2009-01-01 */
[1230771600000, -5.8, 0.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1231549200000, 3.1, 6.8],
[1231635600000, 0.0, 7.6],
[1231722000000, 5.6, 9.4],
[1231808400000, 3.6, 6.5],
[1231894800000, -3.6, 3.8],
[1231981200000, -6.0, -1.5],
[1232067600000, -3.8, 2.4],
[1232154000000, 1.5, 4.2],
[1232240400000, 0.0, 4.5],
[1232326800000, -1.1, 3.6],
[1232413200000, 0.5, 5.1],
[1232499600000, 0.0, 2.5],
[1232586000000, -0.6, 2.1],
[1232672400000, 0.8, 4.7],
[1232758800000, 0.6, 4.4],
[1232845200000, -3.9, 1.4],
[1232931600000, -4.3, 2.0],
[1233018000000, -6.1, -0.4],
[1233104400000, -0.3, 1.9],
[1233190800000, -2.9, 2.7],
[1233277200000, -4.0, -1.0],
[1233363600000, -4.4, -1.9],
/* 2009-12-01 */
[1259629200000, -3.3, 1.7],
[1259715600000, -2.8, -0.7],
[1259802000000, -2.7, 3.8],
[1259888400000, -0.7, 4.2],
[1259974800000, 0.3, 6.1],
[1260061200000, 2.9, 9.8],
[1260147600000, 0.0, 6.8],
[1260234000000, 0.6, 2.8],
[1260320400000, 0.1, 5.1],
[1260406800000, 2.8, 3.9],
[1260493200000, -1.2, 2.2],
[1260579600000, -4.0, -0.4],
[1260666000000, -0.7, 0.7],
[1260752400000, 0.5, 1.6],
[1260838800000, -1.0, 1.5],
[1260925200000, -7.8, -1.0],
[1261011600000, -11.9, -7.9],
[1261098000000, -13.5, -7.9],
[1261184400000, -7.8, -1.7],
[1261270800000, -11.2, -0.6],
[1261357200000, -13.1, -7.2],
[1261443600000, -13.2, -5.2],
[1261530000000, -10.9, -7.7],
[1261616400000, -8.4, -1.5],
[1261702800000, -6.1, -1.2],
[1261789200000, -2.6, -1.2],
[1261875600000, -2.9, 0.7],
[1261962000000, -2.7, 0.7],
[1262048400000, -10.8, -1.3],
[1262134800000, -11.1, -8.0],
[1262221200000, -12.2, -6.5]
]
}]
});
});
现在我想把上面的两个图表放在一个div中，这样看起来就像下图。可能吗？ 给你：

您需要将具有不同类型的variuos系列添加到一个图表中。

这里是：

您需要将不同类型的variuos系列添加到一个图表中