将静态csv数据加载到Highcharts Highstock图形时如何更改线条颜色？

问题描述 投票：0回答：1

以下代码在我的浏览器中将静态csv绘制到Highstock图表中。如何更改绘图线的颜色？这些行显示在图例中，带有标签ADJ_HIGH和ADJ_LOW。 

<html>
<head>
<title>
 Chart
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
</head>
<body>
<div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
<pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.20,165.27
2018-05-02,177.75,173.80
2018-05-03,177.50,174.44
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Chart'
  },
  legend: {
    enabled: true,
    floating: true,
    verticalAlign: 'top',
    align:'left'
  },
  credits: {
    enabled: false
  },
  data: {
    csv: document.getElementById('csv').innerHTML
  }
});
</script>
</body>
</html>
javascript html csv highcharts colors
1个回答
1
投票

要更改线条的颜色，您应该使用以下代码：

series: [{
    color: '#FFFF00',
    lineColor: '#FF0000'
   }]

因此将脚本更改为以下内容：

 <html>
    <head>
        <title>
            Chart
        </title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
        <script src="https://code.highcharts.com/stock/highstock.js"></script>
        <script src="https://code.highcharts.com/maps/modules/map.js"></script>
        <script src="https://code.highcharts.com/modules/data.js"></script>
        <script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
    </head>
    <body>
        <div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
        <pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
            2018-04-27,164.33,160.63
            2018-04-30,167.26,161.84
            2018-05-01,169.20,165.27
            2018-05-02,177.75,173.80
            2018-05-03,177.50,174.44
        </pre>
        <script type="text/javascript">
            Highcharts.stockChart('chart-container', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Chart',
                },
                legend: {
                    enabled: true,
                    floating: true,
                    verticalAlign: 'top',
                    align:'left'
                },
                credits: {
                    enabled: false
                },
                data: {
                    csv: document.getElementById('csv').innerHTML
                },
                series: [{
                    color: '#FFFF00',
                    lineColor: '#FF0000'
                }]
            });
        </script>
    </body>
    </html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.