admin管理员组

文章数量:1429009

I' trying to use the pie chart example here at django-nvd3-doc and I've included the js libraries proceeded with the tutorial but the chart wont be rendered and following js error is displayed

TypeError: chart.tooltipContent is not a function
<anonymous>
 test:23
a.render/c()


HTML OUTPUT:
`

<head>
    <link media="all" href="/static/nvd3/build/nv.d3.min.css" type="text/css" rel="stylesheet" />
<script src="/static/d3/d3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/nvd3/build/nv.d3.min.js" type="text/javascript" charset="utf-8"></script>




    <script>



data_piechart_container=[{"values": [{"value": 52, "label": "Apple"}, {"value": 48, "label": "Apricot"}, {"value": 160, "label": "Avocado"}, {"value": 94, "label": "Banana"}, {"value": 75, "label": "Boysenberries"}, {"value": 71, "label": "Blueberries"}, {"value": 490, "label": "Dates"}, {"value": 82, "label": "Grapefruit"}, {"value": 46, "label": "Kiwi"}, {"value": 17, "label": "Lemon"}], "key": "Serie 1"}];

nv.addGraph(function() {
    var chart = nv.models.pieChart();
    chart.margin({top: 30, right: 60, bottom: 20, left: 60});
    var datum = data_piechart_container[0].values;

    chart.color(d3.scale.category20().range());

chart.tooltipContent(function(key, y, e, graph) {
      var x = String(key);
          var y = String(graph.point.y);

          tooltip_str = '<center><b>'+x+'</b></center>' + y;
          return tooltip_str;
          });
    chart.showLabels(true);

        chart.donut(false);

chart.showLegend(true);




    chart
        .x(function(d) { return d.label })
        .y(function(d) { return d.value });


    chart.height(450);


        d3.select('#piechart_container svg')
        .datum(datum)
        .transition().duration(500)
        .attr('height', 450)
        .call(chart);


    });



</script>


</head>
<body>
    <h1>tere</h1>

    <div id="piechart_container"><svg style="width:600px;height:400px;"></svg></div>
</body>

`
I've encountered a error like this yesterday when I was trying to use the nvd3 js library without django-nvd , anyways this is the last shot I'm giving to this library


UPDATE : I've tried using the demo django project provided in github's repo and same error still exists

I' trying to use the pie chart example here at django-nvd3-doc and I've included the js libraries proceeded with the tutorial but the chart wont be rendered and following js error is displayed

TypeError: chart.tooltipContent is not a function
<anonymous>
 test:23
a.render/c()


HTML OUTPUT:
`

<head>
    <link media="all" href="/static/nvd3/build/nv.d3.min.css" type="text/css" rel="stylesheet" />
<script src="/static/d3/d3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/nvd3/build/nv.d3.min.js" type="text/javascript" charset="utf-8"></script>




    <script>



data_piechart_container=[{"values": [{"value": 52, "label": "Apple"}, {"value": 48, "label": "Apricot"}, {"value": 160, "label": "Avocado"}, {"value": 94, "label": "Banana"}, {"value": 75, "label": "Boysenberries"}, {"value": 71, "label": "Blueberries"}, {"value": 490, "label": "Dates"}, {"value": 82, "label": "Grapefruit"}, {"value": 46, "label": "Kiwi"}, {"value": 17, "label": "Lemon"}], "key": "Serie 1"}];

nv.addGraph(function() {
    var chart = nv.models.pieChart();
    chart.margin({top: 30, right: 60, bottom: 20, left: 60});
    var datum = data_piechart_container[0].values;

    chart.color(d3.scale.category20().range());

chart.tooltipContent(function(key, y, e, graph) {
      var x = String(key);
          var y = String(graph.point.y);

          tooltip_str = '<center><b>'+x+'</b></center>' + y;
          return tooltip_str;
          });
    chart.showLabels(true);

        chart.donut(false);

chart.showLegend(true);




    chart
        .x(function(d) { return d.label })
        .y(function(d) { return d.value });


    chart.height(450);


        d3.select('#piechart_container svg')
        .datum(datum)
        .transition().duration(500)
        .attr('height', 450)
        .call(chart);


    });



</script>


</head>
<body>
    <h1>tere</h1>

    <div id="piechart_container"><svg style="width:600px;height:400px;"></svg></div>
</body>

`
I've encountered a error like this yesterday when I was trying to use the nvd3 js library without django-nvd , anyways this is the last shot I'm giving to this library


UPDATE : I've tried using the demo django project provided in github's repo and same error still exists

Share Improve this question edited Feb 1, 2016 at 8:44 Alireza Soori asked Feb 1, 2016 at 7:33 Alireza SooriAlireza Soori 6459 silver badges26 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 4

tooltipContent was deprecated, and tooltip was moved into it's own object.

Use chart.tooltip.contentGenerator(), and pass in a function that builds the content.

Until the developer merges the pull request with this fix, you may wish to update your requirements.txt to include this line:

-e git://github./aniketmaithani/python-nvd3#egg=python-nvd3

To add up on cakan's answer and also to be specific. You need to edit these files by replacing 'chart.tooltipContent' with 'chart.tooltip.contentGenerator' on the corresponding line on the 'nvd3' module at the python site-packages.

1.) pythonx.x/site-packages/nvd3/templates/content.html at line '54' and '63'

2.) pythonx.x/site-packages/nvd3/templates/piechart.html at line '18'


Then just refresh or hard refresh your browser then the chart will appear

I just fixed this issue. Because django-nvd3 calls the functions and templates of python-nvd3(also the wrapper for python nvd3 developed by the same person).

The answer of liquidpele is pletely right. You just need to replace all the functions chart.tooltipContent to chart.tooltip.contentGenerator in your python-nvd3 templates file (update files that call that function). This dictionary may appear in your python library installed location just like /lib/python2.7/sites-packages.

本文标签: javascriptdjangonvd3 charttooltipContent is not a functionStack Overflow