标签: bullet-chart

我正在使用D3.JS网站上的子弹图示例http://bl.ocks.org/4061961:

我的目标是将子弹图本身保存为SVG文件,以便在Inkscape中进行编辑.使用带有phantom.js的rasterize.js示例,我能够修改代码,将子弹图保存为PNG文件,并以编程方式提取SVG代码并将其保存到文件中.下面是修改后的rasterize.js文件,用于保存SVG代码:

var page = require('webpage').create(), address, output, size;


if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                var results = page.evaluate(function(){
                   return document.getElementById('chart').innerHTML
                })
            console.log(results);
            phantom.exit();
        }, 200);
    }
});
}

上面的JS存储在"rasterize.js"中,并在命令行上提供给phantomjs.exe以创建SVG和PNG文件.

> phantomjs.exe rasterize.js bullet.html bullet.png > bullet.svg

以下是存储在GIST上的"bullet.svg"文件的链接:https://raw.github.com/gist/4178632/08396404f40210a801ef36aeee526d9f128952a8/bullets.svg …

试图将Bullet图表设计为与营销愿望完全一致.所需的Graph看起来像:

如何在条形图的顶部添加标签？

我试过设置Kendo文档中的labels属性:

 labels:
 {
visible: true,
format: "{0}",
font: "14px Arial",
 },

这是我的脚本不起作用:

        $barChart = $("#bar-chart").empty();

         $barChart.kendoChart({
            theme: global.app.chartsTheme,
            renderAs: "svg",
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column"
            },
            series: [
                {   
                    type: "verticalBullet",
                    currentField: "score",
                    targetField: "average",
                    target: {
                        color: "#444",
                        dashType: "dot",
                        line: {
                          width: 1,
                        }
                    },
                    labels:
                    {
                        visible: true,
                        format: "{0}",
                        font: "14px Arial",
                    },
                    data: [
                       {
                            score: 93.7,
                            average: 65.2,                              
                        }, {
                            score: 80.2,
                            average: 22.2,
                        }, {
                            score: 60.8, …

我在D3 v2.4.2 github存储库中引用了子弹图示例.

我有一些问题可以帮助澄清这个例子中发生的事情.

1)在bulletChart函数中有8个声明,形式为bullet.ranges = function(x){},bullet.markers = function(x){}等.这个子弹对象来自哪里？它是否内置于图书馆？我以为我们已经将变量范围设置为bulletRanges函数,或者这两个不同的范围变量？

2)这些功能内部实际发生了什么？

3)最后一个问题.当bulletChart函数开始执行时,它会在执行时执行子弹函数还是等待显式调用？因为我从未真正看到明确要求的子弹(g)？

这个库真的很混乱.任何帮助非常感谢.