highcharts 图表、图例和工具提示中的线条颜色不匹配

n3ipq98p  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(251)

我希望有人能帮助我。我有一个有多个Y轴的图表。我可以调整大多数颜色。只有图例和工具提示中的颜色与线条颜色不匹配。线条颜色和轴的颜色是绿色。但是,图例和工具提示中的颜色是蓝色。有人能写信告诉我在哪里可以设置此颜色吗?
example

<script type="text/javascript">
  (function(H) {
    H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
      var rows = proceed.call(this, multiLevelHeaders);
      rows = rows.map(row => {
        if (row.x) {
          row[0] = H.dateFormat('%d.%m.%Y', row.x);
        }
        return row;
      });

      return rows;
    });
  }(Highcharts));

  Highcharts.chart('container', {

      chart: {
              zoomType: 'x',
              scrollablePlotArea: {
                  minWidth: 600,
                  scrollPositionX: 1
              }
          },
      title: {
          text: ''
      },

      xAxis: {
          type: 'datetime',
            labels: {
              format: '{value:%d.%m.%Y}'
                    }
      },

      yAxis: [{ //Betriebstunden
          labels: {
              format: '{value} h',
              style: {
                  color: Highcharts.getOptions().colors[2]
              }
          },
          title: {
              text: 'Betriebsstunden',
              style: {
                  color: Highcharts.getOptions().colors[2]
              }
          },
          opposite: true
      }, { //Temperatur MIN, MAX
          title: {
              text: 'Temperatur Bereich',
              style: {
                  color: Highcharts.getOptions().colors[0]
              }
          },
          labels: {
              format: '{value} °C',
              style: {
                  color: Highcharts.getOptions().colors[0]
              }
          }
      }, { //Delta
          title: {
              text: 'Temperatur Delta',
              style: {
                  color: Highcharts.getOptions().colors[4]
              }
          },
          labels: {
              format: '{value} °C',
              style: {
                  color: Highcharts.getOptions().colors[4]
              }
          }
      }, { //Drehzahl
          title: {
              text: 'Max. Drehzahl',
              style: {
                  color: Highcharts.getOptions().colors[6]
              }
          },
          labels: {
              format: '{value} %',
              style: {
                  color: Highcharts.getOptions().colors[6]
              }
          },
          opposite: true
      }],

      tooltip: {
          xDateFormat: '%d.%m.%Y',
          crosshairs: true,
          shared: true
      },

      series: [{
          name: 'Betriebsstunden',
          data: <?php echo chartDataTimeDate($mysqli, $sqlBS) ?>,
          type: 'spline',
          line: {
            color: Highcharts.getOptions().colors[2]
          },
          tooltip: {
              valueSuffix: ' h',
          },
          lineColor: Highcharts.getOptions().colors[2],
          lineWidth: 3,
          marker: {
            enabled: false
          }
      }, {
          name: 'Temperatur',
          data: <?php echo chartDataTimeDate($mysqli, $sqlTemp) ?>,
          type: 'arearange',
          yAxis: 1,
          color: Highcharts.getOptions().colors[0],
          marker: {
              enabled: false
          }
      },{
          name: 'Temperatur Delta',
          data: <?php echo chartDataTimeDate($mysqli, $sqlDelta) ?>,
          type: 'spline',
          yAxis: 2,
          tooltip: {
              valueSuffix: ' °C'
          },
          Color: Highcharts.getOptions().colors[4],
          lineColor: Highcharts.getOptions().colors[4],
          lineWidth: 3,
          marker: {
            enabled: false
            } 
      },{
          name: 'Drehzahl',
          data: <?php echo chartDataTimeDate($mysqli, $sqlDZ) ?>,
          type: 'spline',
          yAxis: 3,
          tooltip: {
              valueSuffix: ' %'
          },
          Color: Highcharts.getOptions().colors[6],
          lineColor: Highcharts.getOptions().colors[6],
          lineWidth: 3,
          marker: {
            enabled: false
            } 
      }]
  });
</script>
xxe27gdn

xxe27gdn1#

设置series.color而不是series.line.color

series: [{
    name: 'Betriebsstunden',
    type: 'spline',
    color: Highcharts.getOptions().colors[2],
    ...
  }, ...]

现场演示:http://jsfiddle.net/BlackLabel/mx8fsbaz/
API引用:https://api.highcharts.com/highcharts/series.line.color

相关问题