jqPlot - 如何更改负色

发布于 2024-10-25 19:32:04 字数 1320 浏览 1 评论 0原文

我正在使用 jqPlot 绘制一个面积图,系列默认值 fill: true, fillToZero: trueuseNegativeColors 默认为 true。我可以更改颜色fillColor,但我没有找到如何更改线条颜色填充颜色的方法> 低于零 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
    }
};

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

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:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

如若梦似彩虹 2024-11-01 19:32:04

我刚刚在源代码中找到了它,例如:

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

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

fillToZero 系列选项将创建一个图表,其中线条或条形朝零轴线向下或向上填充。线低于零的部分的阴影将比高于零的部分更暗。这些颜色可以使用“negativeSeriesColors”选项进行自定义。正值根据“seriesColors”选项着色。

,但文档中没有所有可用选项。

所以我像这样添加负色:

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

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

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.

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);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文