jqPlot—如何更改消极颜色

时间:2022-09-15 09:31:03

I am using jqPlot to draw an area graph with series defaults fill: true, fillToZero: true with useNegativeColors default to true. I can change the color and fillColor but I did not find a way how to change the line color or fill color below zero x-axis line. I want a positive value with green color and a negative value red color. Currently negative value default to blue. Here is the jqPlot option:

我正在使用jqPlot来绘制一个区域图,其中包含系列默认填充:true, fillToZero: true, useNegativeColors默认为true。我可以改变颜色和填充颜色,但是我没有找到一种方法来改变线的颜色或者填充在0 x轴以下的颜色。我想要一个绿色的正值,一个红色的负值。当前负值默认为蓝色。jqPlot选项如下:

var chartOptions = {
    title: { show: false },
    axesDefaults: {
        show: false,
        showGridline: false,
        borderWidth: 0,
        showTicks: false,
        showTickMarks: false,
        tickOptions: {
            show: false,
            showLabel: false,
            showMark: false,
            showGridline: false
        }
    },
    axes: {
        xaxis: { min: 0, max: 10 },
        yaxis: { min: -5, max: 5 }
    },
    seriesDefaults: {
        fill: true,
        fillToZero: true,
        fillAndStroke: true,
        color: "rgba(190,230,110, 0.8)",
        fillColor: "rgba(206,236,145, 0.8)",
        shadow: false,
        showMarker: false,
        lineWidth: 1,
        rendererOptions: {
            highlightMouseOver: false
        }
    },
    legend: { show: false },
    grid: {
        drawGridLines: false,
        background: "rgba(255,255,255,0)",
        shadow: false
    }
};

Edit: Add info: currently negative value default to blue

编辑:添加信息:当前负值默认为蓝色。

1 个解决方案

#1


8  

I just found it in source code some thing like:

我只是在源代码中找到了一些东西,比如:

this.negativeSeriesColors = [ "#498991", "#C08840", "#9F9274", "#546D61", "#646C4A", "#6F6621", "#6E3F5F", "#4F64B0", "#A89050", "#C45923", "#187399", "#945381", "#959E5C", "#C7AF7B", "#478396", "#907294"];

It is mention in the fillToZero example: http://www.jqplot.com/tests/fillToZero.php

fillToZero示例中提到:http://www.jqplot.com/tests/fillToZero.php

The fillToZero series option will create a chart where lines or bars are filled down or up toward the zero axis line. The portion of the line below zero will be shaded darker than the portion above zero. These colors can be customized with the "negativeSeriesColors" option. Positive values are colored according to the "seriesColors" option.

fillToZero系列选项将创建一个图表,其中的线或条被填入或向上到零轴线。这条线在0以下的部分将被着色得比在0以上的部分更黑。这些颜色可以通过“阴性色”选项定制。正值根据“seriesColors”选项进行着色。

but don't have in the documentation all available options.

但是不要在文档中包含所有可用的选项。

So I add the negative color like this:

所以我用这样的颜色

var chartOptions = {
    ...,
    negativeSeriesColors: ["#F94545", ...],
};
$.jqplot('chart1', data, chartOptions);

#1


8  

I just found it in source code some thing like:

我只是在源代码中找到了一些东西,比如:

this.negativeSeriesColors = [ "#498991", "#C08840", "#9F9274", "#546D61", "#646C4A", "#6F6621", "#6E3F5F", "#4F64B0", "#A89050", "#C45923", "#187399", "#945381", "#959E5C", "#C7AF7B", "#478396", "#907294"];

It is mention in the fillToZero example: http://www.jqplot.com/tests/fillToZero.php

fillToZero示例中提到:http://www.jqplot.com/tests/fillToZero.php

The fillToZero series option will create a chart where lines or bars are filled down or up toward the zero axis line. The portion of the line below zero will be shaded darker than the portion above zero. These colors can be customized with the "negativeSeriesColors" option. Positive values are colored according to the "seriesColors" option.

fillToZero系列选项将创建一个图表,其中的线或条被填入或向上到零轴线。这条线在0以下的部分将被着色得比在0以上的部分更黑。这些颜色可以通过“阴性色”选项定制。正值根据“seriesColors”选项进行着色。

but don't have in the documentation all available options.

但是不要在文档中包含所有可用的选项。

So I add the negative color like this:

所以我用这样的颜色

var chartOptions = {
    ...,
    negativeSeriesColors: ["#F94545", ...],
};
$.jqplot('chart1', data, chartOptions);