Question

如何在Jqplot堆积条形图中为条形指定自己的颜色？我说的是为单条设置不同的颜色。我已经完成了几个例子，但是所有这些例子都使用默认颜色。有没有办法明确设置堆积条形图中条形的颜色？

enter image description here

以下是我现在的代码：

var s1=[11,28,22,47,11,11]; 
var s2=[0,6,3,0,0,0];
var s3=[1,0,3,0,0,0 ];
var dataArray = [s1, s2, s3];

var ticks =  bcdarr;

var options = {
    title: ' STATUS',
    stackSeries: true,
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        pointLabels: {
            show: true
        },
        rendererOptions: { 
            barWidth: 25,
            varyBarColor: true,
            },
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks,
        },
        yaxis: {
            //autoscale: true,
            //label: 'Application Count',
            min : 0,
            tickInterval : 5,
            max:50
        }
    },
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
            angle: -30,
            fontSize: '10pt'
        }
    }
};

Answer 1

试试这个：

在你的jqplot中你缺少seriesColors。使用类似下面的内容：

$.jqplot('chart3', [s1, s2, s3], {
seriesColors:['#000000', '#ffffff', '#000000'],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
blah blah

Answer 2

查找有关如何做事的文档的最佳位置是API Documentation。它包含每个组件和插件的文档以及每个组件可用的选项。

如almas shaikh所示，更改堆叠条形图中条形各部分颜色的设置是seriesColors属性。这是一个数组，其颜色定义为文本字符串，就像您为CSS提供的那样，或style。

在您从中获取上述图片以获取（working JSFiddle）的示例中： Same plot with different colors

您可以添加：

//Define colors for the stacked bars:
seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],

完整的函数调用将是：

$(document).ready(function(){
  var s1 = [2, 6, 7, 10];
  var s2 = [7, 5, 3, 4];
  var s3 = [14, 9, 3, 8];
  plot3 = $.jqplot('chart3', [s1, s2, s3], {
    //Define colors for the stacked bars:
    seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],

    // Tell the plot to stack the bars.
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
          // Put a 30 pixel margin between bars.
          barMargin: 30,
          // Highlight bars when mouse button pressed.
          // Disables default highlighting on mouse over.
          highlightMouseDown: true    
      },
      pointLabels: {show: true}
    },
    axes: {
      xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer
      },
      yaxis: {
        // Don't pad out the bottom of the data range.  By default,
        // axes scaled as if data extended 10% above and below the
        // actual range to prevent data points right on grid boundaries.
        // Don't want to do that here.
        padMin: 0
      }
    },
    legend: {
      show: true,
      location: 'e',
      placement: 'outside'
    }      
  });
  // Bind a listener to the "jqplotDataClick" event.  Here, simply change
  // the text of the info3 element to show what series and ponit were
  // clicked along with the data for that point.
  $('#chart3').bind('jqplotDataClick', 
    function (ev, seriesIndex, pointIndex, data) {
      $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
    }
  ); 
});

附加（点标签）：
查找有关如何做事的文档的最佳位置是API Documentation。它包含每个组件和插件的文档以及每个组件和选项的可用选项。 [在此重申并在答案的顶部，因为我只是添加了链接。]

点标签的文档位于插件API文档中：PointLabels（plugins / jqplot.pointLabels.js）。

具体而言，显示点标签的选项在

中指定

{
    seriesDefaults:{
      pointLabels: {show: true}
    }
}

要显示标签，而不是零标签，请使用：

{
    seriesDefaults:{
      pointLabels: {
          show: true,
          hideZeros: true
      }
    }
}

如何在Jqplot堆积条形图中指定条形颜色？

2 个答案: