【问题标题】:Highcharts areaspline, not getting the default color for chartHighcharts areaspline,没有获得图表的默认颜色
【发布时间】:2019-08-22 03:11:18
【问题描述】:

我正在创建一个arespline highcharts。因为我没有设置任何颜色,所以它应该默认为默认的蓝色。对我来说,它会自动填充rgba(247, 163, 92, 0.75);。为什么会这样。如何在顶部边框上获得默认的深蓝色,在 areaspline 内获得默认的蓝色。

这是我的代码:

    let series_vals = [];
    let data_array = [];
    let val_array = [];
    for (let i = 0; i <= 15 i++) {
        series_trend.push("series_trend" + i);
        data_array.push([]);
        val_array.push(val);
    }
    let series = [];

    series_vals.forEach((name, index) => {
        series.push({
            val_array: val_array[index],
            data: data_array[index],
        })
    });

    $.getJSON(json, result => {
        series.forEach(obj => {
            result.forEach((elem, i, array) => {
                if (elem.val === obj.val) {
                    obj.data.push({
                        x: elem.date,
                        y: elem.xyz,
                    });
                }
            });
        });
        Highcharts.chart(target, {
            chart: {
                height: 100,
                width: 300,
                type: 'areaspline',
            },
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            xAxis: {
                visible: false
            },
            yAxis: {
                visible: false
            },
            tooltip: {
                formatter: function() {
                    let date_format = (filter == 'day') ? moment(this.key).format('MMM DD, YYYY') : moment(this.key).format('MMM YYYY');
                    let tooltip = `
                    <span style="font-weight:500;">${date_format}</span>
                    <br />
                    <span>${this.y}</span>
             `;
                    return tooltip;
                },
                useHTML: true
            },
            plotOptions: {
                series: {
                    fillColor: null,
                    marker: {
                        enabled: false,
                        symbol: 'circle'
                    }
                }
            },
            series: series
        });
    });

默认情况下,这是我得到的颜色:

有什么办法可以改成默认的吗?

【问题讨论】:

    标签: javascript jquery charts highcharts spline


    【解决方案1】:

    您可以通过设置这些选项来设置区域颜色:

      plotOptions: {
        areaspline: {
          fillColor: 'rgba(123, 181, 236, 0.7)',
          lineColor: '#7BB5EC',
          marker: {
            fillColor: '#7BB5EC'
          }
        }
      }
    

    演示:

    【讨论】:

      【解决方案2】:

      你可以设置你的颜色主题如下

      Highcharts.setOptions({
          colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
      });
      

      小提琴:https://jsfiddle.net/mq1rsnjt/

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2021-10-13
        • 2015-03-17
        • 2014-04-24
        • 2014-04-05
        • 1970-01-01
        • 1970-01-01
        • 2017-04-02
        • 2017-03-26
        相关资源
        最近更新 更多