簡體   English   中英

將靜態 csv 數據加載到 Highcharts Highstock 圖時如何更改線條顏色?

[英]How to change line color when loading static csv data into Highcharts Highstock graph?

以下代碼將靜態 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>

要更改線條的顏色,您應該使用以下代碼:

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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM