时间戳

首页 > 解决方案 > 如何更改highcharts中阴影区域的颜色

javascript - 如何更改highcharts中阴影区域的颜色

问题描述

我想要高图表中时间序列图表的相同颜色的线条和区域。我在此处附加 jsfiddle 的链接，图表的阴影区域和线条颜色为蓝色，但我想要此十六进制代码 #70843A。谁能帮我？https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-time-series

Highcharts.getJSON(
  "https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/usdeur.json",
  function (data) {
    Highcharts.chart("container", {
      chart: {
        zoomType: "x",
      },
      title: {
        text: "USD to EUR exchange rate over time",
      },
      subtitle: {
        text:
          document.ontouchstart === undefined
            ? "Click and drag in the plot area to zoom in"
            : "Pinch the chart to zoom in",
      },
      xAxis: {
        type: "datetime",
      },
      yAxis: {
        title: {
          text: "Exchange rate",
        },
      },
      legend: {
        enabled: false,
      },
      plotOptions: {
        area: {
          fillColor: {
            linearGradient: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1,
            },
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [
                1,
                Highcharts.color(Highcharts.getOptions().colors[0])
                  .setOpacity(0)
                  .get("rgba"),
              ],
            ],
          },
          marker: {
            radius: 2,
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1,
            },
          },
          threshold: null,
        },
      },

      series: [
        {
          type: "area",
          name: "USD to EUR",
          data: data,
        },
      ],
    });
  }
);
.highcharts-figure,
.highcharts-data-table table {
  min-width: 360px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.highcharts-data-table tr:hover {
  background: #f1f7ff;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">
    Highcharts has extensive support for time series, and will adapt
    intelligently to the input data. Click and drag in the chart to zoom in and
    inspect the data.
  </p>
</figure>

标签： javascriptangularjshighcharts

解决方案

如果我理解正确的问题，你不想要那个渐变。

Highcharts 提供了它，并且在您的工作示例中，特别是

plotOptions: {
        area: {
          fillColor: {
            linearGradient: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1,
            },
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [
                1,
                Highcharts.color(Highcharts.getOptions().colors[0])
                  .setOpacity(0)
                  .get("rgba"),
              ],
            ],
          }

这可以通过 setOpacity.. 来更新。

[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(1).get('rgba')]

正如它所说，您只需将不透明度设置为 1。全块颜色。

如果您只想更改颜色本身，您可以将填充颜色设置为 CSS 颜色。

fillColor: '#FF0000',

丑陋的红色 JSfiddle

文档在这里：Highcharts 文档

如果您希望将线条颜色等设置为您使用的 HEX。

您可以lineColor在标记中设置..

绿线颜色

该文档的布局非常好。

推荐阅读