【问题标题】:jqPlot - How to change negative colorjqPlot - 如何改变负颜色
【发布时间】:2011-07-22 18:50:11
【问题描述】:

我正在使用 jqPlot 绘制具有系列默认值 fill: true, fillToZero: true面积图useNegativeColors 默认为 true。我可以更改colorfillColor,但我没有找到如何更改零 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
    }
};

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

【问题讨论】:

    标签: javascript jquery jqplot


    【解决方案1】:

    我刚刚在源代码中找到了类似的东西:

    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);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-05-01
      • 1970-01-01
      • 2021-06-09
      • 1970-01-01
      • 1970-01-01
      • 2019-11-03
      • 2011-11-22
      • 1970-01-01
      相关资源
      最近更新 更多