Question

我需要绘制一个图表，例如点击此处sample graph

但不同的是，在给定的链接中，他们将单个arrray作为输入，但在我的情况下，我有多个数组作为输入。我面临的问题是我无法通过点击此处转换我的图表sample graph

// here is design code 
<div ng-app>
        <div id="matrixGraphContainer" style="height:260px;">
            <div id="matrixGraph" style="height:260px;">

            </div>
        </div>
        <div ng-controller="FundsViewModel">



            <div id="chartLegend" style="padding-top:10px;padding-bottom:10px">
            </div>
        </div>
//  here is script for the grah plotting with input data 
<script type="text/javascript">

        var graphData =
         [
             {
                 "label": "ABSOLUTE RETURN", "data": [[18, 40], [19, 20], [20, 100], [21, 100], [22, 100],
                   [23, 100], [24, 100], [25, 100], [26, 100], [27, 100], [28, 100], [29, 100], [30, 100],
                   [31, 100], [32, 100], [33, 100], [34, 100], [35, 100], [36, 100], [37, 100], [38, 100],
                   [39, 100], [40, 100], [41, 100], [42, 100], [43, 100], [44, 100], [45, 100], [46, 100], [47, 100]], "color": "#395A85"
             }, {
                 "label": "EMERGING MARKETS EQUITY (MGI)", "data": [[18, 30], [19, 20], [20, 0], [21, 0],
                     [22, 0], [23, 0], [24, 0], [25, 0], [26, 0], [27, 0], [28, 0], [29, 0],
                     [30, 0], [31, 0], [32, 0], [33, 0], [34, 0], [35, 0], [36, 0], [37, 0],
                     [38, 0], [39, 0], [40, 0], [41, 0], [42, 0], [43, 0], [44, 0], [45, 0],
                     [46, 0], [47, 0]], "color": "#6EAA38"
             }, {
                 "label": "ACTIVE GLOBAL EQUITY (MGI) HEDGED VERSION", "data": [[18, 30], [19, 80], [20, 0], [21, 0], [22, 0],
                     [23, 0], [24, 0], [25, 0], [26, 0], [27, 0], [28, 0], [29, 0], [30, 0], [31, 0], [32, 0], [33, 0], [34, 0],
                     [35, 0], [36, 0], [37, 0], [38, 0], [39, 0], [40, 0], [41, 0], [42, 0], [43, 0], [44, 0], [45, 0], [46, 0], [47, 0]], "color": "#00A8C8"
             }];


        function FundsViewModel($scope) {
           // debugger;
            drawMatrixGraph(graphData);

        }

        var drawMatrixGraph = function (graphData)
        {
            //debugger;
           plot = $.plot($("#matrixGraph"), graphData, {
                xaxis: {
                    tickSize: 2,
                    tickDecimals: 0,
                    tickLength: 0,
                    axisLabel: 'Age - Years',
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                    axisLabelPadding: 5
                },
                yaxis: {
                    min: 0,
                    max: 100,
                    tickDecimals: 0,
                    tickSize: 20,
                    axisLabel: 'Target Allocation',
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                    axisLabelPadding: 5
                },
                series: {
                    stack: 0,
                    lines: { show: false, steps: false },
                    bars: { show: true, barWidth: 0.9, align: 'center', },
                },
                grid: {
                    borderWidth: 1
                },
                legend: {
                    container: $("#chartLegend")
                }
           });
           var plot = $.plot("#placeholder", [d], options);
        };


</script>

Answer 1

为此你必须使用flot.select.js 剩下的事情是一样的。

Fiddle Here

对于条形图，请检查此Fiddle

具有多个阵列输入的每日访问者图表

1 个答案: