标签: jqplot

我最近开始使用jqPlot.生成的图形看起来很棒,我喜欢它.这里和那里有一些小东西需要学习,但总的来说它很棒.

我正在使用堆叠条生成并遇到了一个令人讨厌的问题.基本上,我希望从Y轴的0到24小时,X轴上的天数,以及在图表上绘制某个活动的秒数的12小时时间.但是,我希望这些日子(午夜)从图表的顶部开始,然后到底部.

我可以使用'min'和'max'的倒数轻松地翻转数据,但是当我试图翻转滴答声时会出现问题; 基本上,"时间".

我的系列默认设置为隐藏轴:

seriesDefaults: {
    renderer: $.jqplot.BarRenderer,
    yaxis: 'y2axis'
},

我把一个占位符系列(值为全0,例如:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0])与单独的yaxis联系以绘制日期刻度:

series: [
    { show: true, yaxis: 'yaxis', }
],

我可以通过更改默认y轴上的最小值和最大值并隐藏它来翻转值:

y2axis:{
    min: 24,
    max: 0,
    showTicks: false
}

然后我设置刻度,并使用DateAxisRenderer格式化它们:

yaxis:{
    renderer:$.jqplot.DateAxisRenderer,
    ticks: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24'],
    tickOptions: { formatString: '%I:%M %p' }
}

这将创建一个yaxis,时间为从上午12:00到下午12:00,以该格式返回12:00 AM.但是从图的底部开始递增.

显然,在'yaxis'上翻转min和max将没有任何结果,因为只有占位符值,它只会翻转值.我将如何翻转轴值,以便时间(从底部)24,22,20 ......等等,？

感谢您的帮助.

我正在使用jqplot使用此处显示的代码创建堆叠的水平条形图:

perc_data = [[[6, "1"]], [[92, "1"]], [[1, "1"]], [[1, "1"]]];
series_array = [ { label: "Mud", color: "#ccaa00"}, { label: "Sand", color: "#ffeecc"}, 
                 { label: "Gravel", color: "#dddddd"}, { label: "Rock", color: "#664400"} ];
var perc_chart = $.jqplot('perc_div', perc_data, {
    stackSeries: true,
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        shadowAngle: 135,
        rendererOptions: {  barWidth: 25,
                            barDirection: 'horizontal',
        }
    },
    series: series_array,
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            rendererOptions: {  tickRenderer: $.jqplot.AxisTickRenderer, 
                                tickOptions: {  mark: null,
                                                fontSize: 12
                                             }
            }
        },
        xaxis: {
            min: …

我有一个jQPlot线图,上面有三个不同的系列,并使用Highlighter插件显示每个系列中数据点的悬停.我想为图表中的每一行使用不同的荧光笔选项.

第1行和第2行需要显示y值,第3行需要显示y值以及消息.例如,第1行上方的悬停将为"10",但第3行需要为"Target = 25".

我似乎无法找到任何方法为每个特定系列指定不同的选项.任何帮助将非常感激.

我的要求是在用户点击时获取饼图切片的选定颜色.如果我能在以下功能中完成它会很好:

$('#chart1').bind('jqplotDataClick',
    function (ev, seriesIndex, pointIndex, data) {
      alert("ev = " + ev + " seriesIndex = " + seriesIndex + "pointIndex = " + pointIndex + "data = " + data);
});

有任何想法吗？谢谢.

我想在荧光计中使用荧光笔功能.我的代码是

function device_ownership_graph(titleOfGraph, corporateOwned,
        corporateShared, employeeOwned) {

    var arrCorporateOwned = [ 'Corporate-Owned', corporateOwned ];
    var arrCorporateShared = [ 'Corporate-Shared', corporateShared ];
    var arrEmployeeOwned = [ 'Employee-Owned', employeeOwned ];

    $.jqplot.config.enablePlugins = true;
    /*Here we construct graph*/
    $.jqplot('device_ownership_graph', [ [ arrCorporateOwned, arrCorporateShared, arrEmployeeOwned ] ], {
        title : {
            text : titleOfGraph, // title for the plot,
            show : true,
            fontSize : 14,
            textColor : '#808080',
            textAlign : 'center'
        },
        seriesColors : [ "#00b0f0", "#ffc000", "#92d050"],
        seriesDefaults : {
            // Make this …

我正在尝试为线图获取自定义工具提示,因为我希望工具提示更详细地描述点而不是该点的值.(附图进一步解释了我的意思)

我已尝试过如何做到这一点.

以下是我的代码:

<script type="text/javascript">        $('#page3a').live('pageshow', function () {
        var s1 = [1, 2, 3, 4, 5];
        var s2 = ["Message 1", "Message 2", "Message 3", "Message 4", "Message 5"];

        var lineGraph1 = $.jqplot('lineGraph1', [s1,s2], {

            animate: true,
            seriesDefault: {
                showMarker: false,
                pointLabels: { show: true }
            },

            grid: {
                drawBorder: false,
                drawGridlines: false,
                background: '#eafaff',
                shadow: false
            },
            axesDefaults: {
                show: false,

                showTicks: false,
                showTickMarks: false

            },

            highlighter: {
                show: true,
                sizeAdjust: 8,
                tooltipLocation: 'n',
                tooltipAxes: 'piered',
               formatString:'%s',
                fadeTooltip: …

在过去的一年里,我看过bitbucket的3张关于这件事的门票,但从未见过明确的答案.

其中一张门票提供了一些代码,但我不知道该代码属于哪里.

var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio || 1;

ratio = devicePixelRatio / backingStoreRatio;
if (devicePixelRatio !== backingStoreRatio) {
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;
this.canvasOrigWidth = oldWidth;
this.canvasOrigHeight = oldHeight;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;

canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';

// now scale the context to counter
// the fact …

是否有可能使用Jqplot或Google Visualizations这样的东西

到目前为止,我能够用jqplot创建类似但不完全是我想要的东西

码:

var style = {
seriesDefaults: {
    fill: true,
    fillToZero: true,
    fillAndStroke: true,
    color: "rgba(190,230,110, 0.8)",
    fillColor: "rgba(206,236,145, 0.8)",
    shadow: false,
    lineWidth: 1,
    rendererOptions: {
        highlightMouseOver: false
    }
},
seriesColors: ["#009900", "#000099", "#00cc00", "#0000cc"],
negativeSeriesColors: ["#bb0000", "#ffe700", "#dd0000"]   };

有没有办法为标记添加多种不同的效果？

我知道有线条,颜色和阴影属性,所有这些都可以帮助我尝试创建以下设计,但是在过去的2个小时里我一直都失败了,并且绝对没有提出任何问题!

seriesDefaults: {
    lineWidth: 50,
    color: 'yellow',
    markerRenderer: $.jqplot.MarkerRenderer,
    markerOptions: {
        show: true,
        style: 'circle',
        color: 'white',
        lineWidth: 4,
        size: 25,
        shadow: true,
        shadowAngle: 0,
        shadowOffset: 0,
        shadowDepth: 1,
        shadowAlpha: 0.07
    }
}

我觉得需要以下属性:markerBackgroundColor, markerShadowSize实现我的结果.

我可以用css3做些什么吗？比如为标记和样式创建我自己的html？

我正在使用primefaces 5.1并试图创建折线图,它的工作正常.但我想自定义背景颜色,网格,线条颜色.

我的XHTML:

<p:chart type="line" model="#{chartViewLine.lineModel1}" style="height:300px; width:570px;"/>

我的JAVA文件:

private LineChartModel lineModel1;

@PostConstruct
public void init() {
    createLineModels();
}

public LineChartModel getLineModel1() {
    return lineModel1;
}

private void createLineModels() {
    lineModel1 = initLinearModel();
    lineModel1.setLegendCols(3);
    lineModel1.setLegendPosition("e");
    Axis yAxis = lineModel1.getAxis(AxisType.Y);
    yAxis.setMin(0);
    yAxis.setMax(10);

   }

private LineChartModel initLinearModel() {
    LineChartModel model = new LineChartModel();

    LineChartSeries series1 = new LineChartSeries();
    series1.setLabel("Series 1");

    series1.set(1, 2);
    series1.set(2, 1);
    series1.set(3, 3);

    LineChartSeries series2 = new LineChartSeries();
    series2.setLabel("Series 2");

    series2.set(1, 6);
    series2.set(2, 3);
    series2.set(3, 2);

    model.addSeries(series1);
    model.addSeries(series2);
    return …