数据未显示在图表中（metronic 主题）

Question

我想使用 angular 指令从 metronic 主题 (/admin/pages/scripts/index.js) 绘制图表。问题是我可以看到网格但看不到点。我无法弄清楚缺少什么

angular.module('app').directive('drawChart', function() {
    return {

        scope: {
            chartdata: "="
        },
        restrict: 'E',
        template: '<div id="graph-holder" style="min-width: 310px; height: 240px; margin: 0 auto"></div>',

        link: function (scope, element, attrs) {


            $.plot($("#graph-holder"), [{
                data: scope.chartdata,
                lines: {
                    fill: 0.6,
                    lineWidth: 0
                },
                color: ['#f89f9f']
            }, {
                data: scope.chartdata,
                points: {
                    show: true,
                    fill: true,
                    radius: 5,
                    fillColor: "#f89f9f",
                    lineWidth: 3
                },
                color: '#fff',
                shadowSize: 0
            }], {
                xaxis: {
                    tickLength: 0,
                    tickDecimals: 0,
                    mode: "categories",
                    min: 0,
                    font: {
                        lineHeight: 14,
                        style: "normal",
                        variant: "small-caps",
                        color: "#6F7B8A"
                    }
                },
                yaxis: {
                    ticks: 5,
                    tickDecimals: 0,
                    tickColor: "#eee",
                    font: {
                        lineHeight: 14,
                        style: "normal",
                        variant: "small-caps",
                        color: "#6F7B8A"
                    }
                },
                grid: {
                    hoverable: true,
                    clickable: true,
                    tickColor: "#eee",
                    borderColor: "#eee",
                    borderWidth: 1
                }
            });

            var previousPoint = null;
            function showChartTooltip(x, y, xValue, yValue) {
                $('<div id="tooltip" class="chart-tooltip">' + yValue + '<\/div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: y - 40,
                    left: x - 40,
                    border: '0px solid #ccc',
                    padding: '2px 6px',
                    'background-color': '#fff'
                }).appendTo("body").fadeIn(200);
            }
            $("#graph-holder").bind("plothover", function (event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));
                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#tooltip").remove();
                        var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                        showChartTooltip(item.pageX, item.pageY, item.datapoint[0], item.datapoint[1] + ' visits');
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        }
    }
});

我的html：

           <draw-chart chartdata='[['03/2014',2],['06/2014',3]'>

            </draw-chart>

我已将以下脚本添加到页面：

<script src="...jquery.flot.js" type="text/javascript"></script>
<script src="...jquery.flot.resize.js'" type="text/javascript"></script>
<script src="...jquery.flot.axislabels.js}" type="text/javascript">    </script>

并且控制台没有错误；

Answer 1

Lines/Points 不显示通常表示数据有问题。

首先是这个：

chartdata='[['03/2014',2],['06/2014',3]'

缺少右括号。

其次，该数据格式（仅当您使用类别插件时才支持 ['string', number] 数组。我没有看到您在任何地方加载它。

数据未显示在图表中（metronic 主题）

Data is not showing up in flot chart (metronic theme)

javascript

jquery

flot

angularjs